Javascript 如何获得考虑内部元素的DIV高度'；利润率？

考虑取消以下标记：

<div id="outerElement">
    <div id="innerElement" style="border: 1px solid blue; background-color: #f0f3f5; margin-top: 100px">  
        TESTE
    </div>
</div>

睾丸

我想使用javascript获得

outrelation

的实际最终高度。我注意到，如果我从

innerElement

中删除垂直边距，我可以得到我想要的，但是我不能从

outerement

中更改样式

我该怎么做？

Obs：

---

我已经在所有浏览器中尝试了height、scrollheight和offsetHeight。Chrome为我提供了

scrollHeight

的预期值（包括内部元素的边距）。所有其他浏览器都会失败。

尝试使用

clientHeight

var outerElement = document.getElementById("outerElement");
if(outerElement.clientHeight) {
alert("Height is "+outerElement.clientHeight+"px");
}
else { alert("Old browser?"); }

我知道你在想什么。。。“这行不通！”唉，这行不通。。。但是，如果您执行类似于向

outerement

添加边框的操作。。。哪怕只是一瞬间

var outerElement = document.getElementById("outerElement");
outerElement.style.border = "1px solid black";
var height = outerElement.clientHeight;
outerElement.style.border = "none";
alert("Height is "+height+"px");

不是最漂亮的解决方案，但它是有效的，如果你能弄清楚它为什么有效（我当然不知道：p），你可能更接近一个好的解决方案

---

但是，一些旧的浏览器可能不支持它。。。你得调查一下；我不能列出它们。

我会使用jQuery。试用

$("#myelementId").height()

然后看看这是否有效。

您可以使用jQuery：

$('#outerElement').height(); // gets the height of the div
$('#outerElement').outerHeight(); // gets the height of the div including margins and padding
$('#outerElement').innerHeight(); // gets the height of the div including padding

---

其中一个肯定会有用。

好的，也不漂亮，但我就是这么做的（免责声明：我曾经从某处偷过这个）

---

这是一个棘手的问题，因为你认为什么是“合适的”高度。包括边框在内的内容的高度、填充或实际边距使用情况如何？一般来说，浏览器在大多数事情上的行为相当一致，但可以清除您需要的内容。（作为一个提示，如果你需要实际使用的边距，它会很痛）。

我想你应该抛出所有元素属性，然后求和，只有这样你才能知道确切的高度。。。但是在高度被设置的情况下，例如clear：我认为这两个属性都不可能知道元素的高度

3秒钟的思考可能是这样的：

var o document.getElementById（'id'）.style

但是我想您还必须包括document.getElementById（'id'）。如果有，高度值。。。。这很有帮助

---

最佳=）

这个答案可能有点明显，但如果您已经知道边距，为什么不手动将其添加到高度？

警告

clientHeight

几乎有效，但不包括边距：(

我只是想补充一句，我今天一直在尝试这个，而nahumsilva&plodder几乎完全正确（nahumsilva的版本似乎更适合跨浏览器{plodder在Chrome/WebKit中似乎不起作用，但我在这些方面不是专家}），他们都忽略了一个元素可能包含的计算样式元素不是由自己的样式定义的

这让我抓狂——我想知道我的

元素在哪里获得了额外的16px的边距高度——直到我意识到它来自于计算样式

因此，长话短说，像nahumsilva/plodder这样的方法对我很有效，增加了一个附加条件，即您应该使用

window.getComputedStyle（element，null）

，它返回一个

csssStyleDeclaration

对象（比如

element.style

）.

element.offsetHeight

/

element.clientHeight

应该为您提供没有边距的高度，因此整个外观如下所示：

var cstyle = window.getComputedStyle( element, null );
var elementHeight = element.offsetHeight +
Number( cstyle.marginBottom.replace(/[^\d\.]/g, '') ) +
Number( cstyle.marginTop.replace(/[^\d\.]/g, '') );

---

添加clearfix，使用jquery height（）并再次删除clearfix类

---

这就行了。：）

如果可以将外部div设置为style

display:inline block，请尝试然后
滚动高度
将包括子元素的边距

如果设置样式
display:flex（由IE 9+支持）
与问题完全无关！为什么只为查找元素的高度而加载jQuery？使用jQuery似乎是一个非常可靠的建议。不是我最喜欢的，但有效+1与问题完全无关！为什么只为查找元素的高度而加载jQuery？现在请稍候，用户询问获取元素高度的最佳方法。他还提到，他目前的解决方案只适用于某些浏览器。chadley和我在这里介绍的是一种检索他的信息和解决他的问题的方法。如果我们的解决方案碰巧涉及到使用jQuery之类的JS库，我看不出问题出在哪里。如果这是一个可能的解决方案，为什么不提出呢？这肯定与问题有关。他问我怎么做，我告诉他怎么做，用jQuery。你甚至不知道它还没有被加载。我想说，今天构建的大多数网站都包含某种js框架@安德烈：我认为问题是边距也会向下推#outrelation，因此#outrelation的实际高度与#innerElement相同。你明白我的意思吗？我同意李维！然而，这表明了几种方法，但不能保证它们不仅仅是他已经尝试过的技术的包装。。。这感觉不像是一个答案，更像是一个地毯炸弹jQuery解决方案。没有一个答案（截至2011年12月）是有意义的，我想知道你是否找到了一个解决办法？添加clearfix实际上做到了这一点。最简单的解决方案是临时向外部元素添加
溢出：hidden
，计算大小，然后再次删除它。
    var total = ((o.height.split("px")[0] == "") ? 0 : o.height.split("px")[0]) +
 ((o.marginTop.split("px")[0] == "") ? 0 : o.marginTop.split("px")[0]) + 
((o.marginBottom.split("px")[0] == "") ? 0 : o.marginBottom.split("px")[0]) + 
((o.paddingTop.split("px")[0] == "") ? 0 : o.paddingTop.split("px")[0]) +
    ((o.borderTop.split("px")[0] == "") ? 0 : o.borderTop.split("px")[0]) +
 ((o.borderBottom.split("px")[0] == "") ? 0 : o.borderBottom.split("px")[0])

var cstyle = window.getComputedStyle( element, null );
var elementHeight = element.offsetHeight +
Number( cstyle.marginBottom.replace(/[^\d\.]/g, '') ) +
Number( cstyle.marginTop.replace(/[^\d\.]/g, '') );