Hauteur totale d'un élément html (div), y compris la bordure, le padding et la marge ?

Question

J'ai besoin de la hauteur totale d'un div, j'utilise actuellement

document.getElementById('measureTool').offsetHeight

offsetHeight - Renvoie la hauteur d'un élément, y compris les bordures et le rembourrage le cas échéant, mais pas les marges.

Mais l'un des éléments imbriqués à l'intérieur du div, a une valeur margin-top de 20% et j'ai donc une mauvaise mesure. J'ai essayé style.marginTop y scrollHeight sans succès.

Comment puis-je obtenir la hauteur totale (bordure, padding, marge) d'un élément (div) en javascript ?

S'il n'y a pas d'autre moyen, je suis d'accord avec jQuery.

Answer 1

Que diriez-vous de quelque chose comme ceci (sans jquery) ? C'est similaire à la réponse de @gdoron mais un peu plus simple. Je l'ai testée dans IE9+, Firefox et Chrome.

function getAbsoluteHeight(el) {
  // Get the DOM Node if you pass in a string
  el = (typeof el === 'string') ? document.querySelector(el) : el; 

  var styles = window.getComputedStyle(el);
  var margin = parseFloat(styles['marginTop']) +
               parseFloat(styles['marginBottom']);

  return Math.ceil(el.offsetHeight + margin);
}

Voici un fonctionnement de jsfiddle .

Answer 2

Si vous pouvez utiliser jQuery :

$('#divId').outerHeight(true) // gives with margins.

Documentation sur jQuery

Pour le vanilla javascript, vous devez écrire beaucoup plus (comme toujours...) :

function Dimension(elmID) {
    var elmHeight, elmMargin, elm = document.getElementById(elmID);
    if(document.all) {// IE
        elmHeight = elm.currentStyle.height;
        elmMargin = parseInt(elm.currentStyle.marginTop, 10) + parseInt(elm.currentStyle.marginBottom, 10) + "px";
    } else {// Mozilla
        elmHeight = document.defaultView.getComputedStyle(elm, '').getPropertyValue('height');
        elmMargin = parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-bottom')) + "px";
    }
    return (elmHeight+elmMargin);
}

Démonstration en direct

source du code

Answer 3

var el = document.querySelector('div');

var elHeight = el.offsetHeight;
elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-top'));
elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-bottom'));

console.log(elHeight);

https://jsfiddle.net/gbd47ox1/

Je pense que cette solution est plus lisible, mais aucune des solutions présentées ne tient compte des tailles qui ne sont pas des pixels... :(

Answer 4

Une autre solution fonctionnelle utilisant fonctions de la flèche :

let el = document.querySelector('div');
let style = window.getComputedStyle(el);
let height = ['height', 'padding-top', 'padding-bottom']
        .map((key) => parseInt(style.getPropertyValue(key), 10))
        .reduce((prev, cur) => prev + cur);

Answer 5

Qdev a écrit un bonne solution Cependant, je pense que offsetHeight est plus rapide et mieux supporté que getBoundingClientRect(). J'ai également utilisé ES6 pour réduire la taille du code.

/**
 * Returns the element height including margins
 * @param element - element
 * @returns {number}
 */
function outerHeight(element) {
    const height = element.offsetHeight,
        style = window.getComputedStyle(element)

    return ['top', 'bottom']
        .map(side => parseInt(style[`margin-${side}`]))
        .reduce((total, side) => total + side, height)
}