Altezza totale di un elemento html (div) incluso bordo, riempimento e margine?

Question

Ho bisogno tutta l'altezza di un div, Attualmente sto usando

document.getElementById('measureTool').offsetHeight 

offsetHeight - Restituisce l'altezza di un elemento, comprese le frontiere e imbottiture se del caso, ma non margini

Ma uno degli elementi nidificati all'interno del div, ha un margin-top di 20%, quindi ho una misurazione sbagliata. Ho provato style.marginTop e scrollHeight senza successo.

Come posso ottenere l'altezza completa (bordo, riempimento, margine) di un elemento (div) in javascript?

Se non c'è altro modo, sto bene con jQuery.

Answer 1

Se è possibile utilizzare jQuery:

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

jQuery docs

Per vaniglia javascript è necessario scrivere molto di più (come sempre ...):

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); 
} 

Live DEMO

code source

Answer 2

Che dire di qualcosa di simile (nessuna jquery)? È simile alla risposta di @ gdoron, ma un po 'più semplice. Testato in IE9 +, Firefox e 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); 
} 

Ecco uno working jsfiddle.

Answer 3

vecchio - comunque ... per tutte le persone jQuery-divieto e di scelta rapida là fuori qui è un po 'più di scripting che espande gli approcci dimensione/getabsoluteheight delle altre risposte:

function getallinheight(obj) { 
    var compstyle=(typeof window.getComputedStyle==='undefined')?obj.currentStyle:window.getComputedStyle(obj); 
    var marginTop=parseInt(compstyle.marginTop); 
    var marginBottom=parseInt(compstyle.marginBottom); 
    var borderTopWidth=parseInt(compstyle.borderTopWidth); 
    var borderBottomWidth=parseInt(compstyle.borderBottomWidth); 
    return obj.offsetHeight+ 
     (isNaN(marginTop)?0:marginTop)+(isNaN(marginBottom)?0:marginBottom)+ 
     (isNaN(borderTopWidth)?0:borderTopWidth)+(isNaN(borderBottomWidth)?0:borderBottomWidth); 
} 
alert(getallinheight(document.getElementById('measureTool'))); 

Answer 4

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/

Penso che questa soluzione è più leggibile, ma nessuna delle soluzioni presentate conto per le dimensioni che non sono pixel ... :(

Answer 5

Un'altra soluzione funzionale utilizzando arrow functions:

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);