Question

我有以下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本身的高度，而不是在元素周围的前后边缘/边距。

有没有办法获得真正的高度？

Answer 1

这是我认为可以帮助您的功能：

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

Answer 2

我强烈建议JQuery做这些事情但是对于普通的javascript，首先你必须得到你已经完成的div高度，然后分别获得边距和填充。
就像这样

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

        var a = parseInt(offsetHeight);
        var c = parseInt(container.style.marginTop.replace("px", ""));
        var d = parseInt(container.style.marginBottom.replace("px", ""));
        var e = parseInt(container.style.paddingTop.replace("px", ""));
        var f = parseInt(container.style.paddingBottom.replace("px", ""));

        var g = a +  c + d + e + f;
        alert(g);

修改

很抱歉，如果您执行“document.getElementById（'container'）。style.marginTop”它将返回带有“px”的值，因此您必须替换该值以删除“px”，然后解析int。< / p>
以上修改过的代码

如何找到真正的DIV高度？

2 个答案: