Css html元素(div)的全高，包括边框，填充和边距

发布于05月29日

我需要div的完整高度，我目前正在使用

document.getElementById('measureTool').offsetHeight

offsetHeight-返回元素的高度，包括边框和填充(如果有)，但不返回边距

但是div中的一个嵌套元素的值是margin-top，即20%，所以我得到了错误的度量.我试了style.marginTop和scrollHeight，但没有成功.

如何在javascript中获得元素(Div)的完整高度(边框、填充、边距)？

如果没有其他方法，我可以使用jQuery.

推荐答案

如果可以使用jQuery:

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

jQuery docs个

对于vanilla javascript，您需要编写更多内容(如always…):

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

code source个