HTML元素（div）的全高，包括边框，内边距和边距？

小编典典

HTML元素（div）的全高，包括边框，内边距和边距？

css

我需要一个div的全高，我目前正在使用

document.getElementById('measureTool').offsetHeight

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

但是div中的一个嵌套元素具有margin- top的20%，因此我得到了错误的度量。我试图style.marginTop与scrollHeight没有成功。

如何在JavaScript中获取元素（div）的完整高度（边框，边距，边距）？

如果没有其他办法，我可以使用jQuery。

阅读 795

2020-05-16

共1个答案

小编典典

如果可以使用jQuery：

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

对于香草javascript，您需要编写更多内容（像往常一样…）：

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

2020-05-16