0

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

有没有办法得到真实的高度？

4

2 回答 2

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>

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

这是一个演示

于 2013-05-14T08:39:14.107 回答
-1

我强烈建议 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。

上面的代码修改

于 2013-05-14T08:06:15.130 回答