Volle Höhe eines HTML-Elements (div) einschließlich Rand, Padding und Rand?

Question

ich die volle Höhe eines div benötigen, bin ich zur Zeit

document.getElementById('measureTool').offsetHeight 

offsetHeight mit - Gibt die Höhe eines Elements, einschließlich der Grenzen und Polsterung falls vorhanden, aber nicht die Margen

Aber eines der verschachtelten Elemente innerhalb der div, hat eine margin-top20%, so bekomme ich eine falsche Messung. Ich habe versucht style.marginTop und scrollHeight ohne Erfolg.

Wie bekomme ich die volle Höhe (Rand, Padding, Rand) eines Elements (div) in Javascript?

Wenn es keinen anderen Weg gibt, bin ich mit jQuery in Ordnung.

Answer 1

Wenn Sie jQuery verwenden:

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

jQuery docs

Für Vanille javascript Sie brauchen viel mehr zu schreiben (wie immer ...):

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

Was ist mit so etwas (keine jquery)? Es ähnelt der Antwort von @ Gdoron, ist aber etwas einfacher. Getestet in IE9 +, Firefox und 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); 
} 

Hier ist ein working jsfiddle.

Answer 3

alte - trotzdem ... für alle jQuery-Verbot und Verknüpfung Leute da draußen hier einige Plus Scripting, das die Dimension/getabsoluteheight Ansätze der anderen Antworten erweitert:

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/

Ich denke, dass diese Lösung besser lesbar ist, aber keine der vorgestellten Lösungen für Größen, die nicht Pixel sind ... :(

Answer 5

Eine andere funktionale Lösung mit 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);