javascript - 如何找到实际的DIV高度？

我有以下html结构：

<div id="container">
     <h1>This is an h1 element</h1>
</div>

当我尝试使用javascript在firefox或chrome div中查找容器的高度时：

var container = document.getElementById("container");
var offsetHeight = container.offsetHeight;

我得到了错误的offsetHeight（如果与clientHeight一起使用）。
我只得到H1本身的高度，而不得到元素周围的边距。

有什么办法可以得到真实的身高吗？

最佳答案

我认为以下功能可以为您提供帮助：

function outerHeight(elem){
    var curStyle = elem.currentStyle || window.getComputedStyle(elem);
    outerHeight = elem.offsetHeight;
    outerHeight += parseInt(curStyle.marginTop);
    outerHeight += parseInt(curStyle.marginBottom);

    console.log(outerHeight);
    //return outerHeight //If you'd like to return the outerheight
}

只是这样称呼它：

<div onclick="outerHeight(this)" id="container">
    <h1>This is an h1 element</h1>
</div>

外部高度将打印在控制台中，但是您可以根据需要将其返回。

这是一个DEMO

关于javascript - 如何找到实际的DIV高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16537804/