如何独立于 CSS 中指定的高度来确定 HTML DOM 元素的实际高度？答案

【问题标题】：How do I determine the actual height of a HTML DOM element independent of the height specified in CSS?如何独立于 CSS 中指定的高度来确定 HTML DOM 元素的实际高度？
【发布时间】：2012-03-29 08:05:04
【问题描述】：

查看这个 jsFiddle：http://jsfiddle.net/kb2vN/1/

CSS 中指定的 div 'mytext' 的高度为 100。div 中 3 个段落的总 offsetHeight 为 3 * 40 = 120。我追求的就是这个值（120）。为什么 document.getElementById('mytext').offsetHeight 没有返回这个值？父元素的 offsetHeight 是其子节点的 offsetHeights 之和，这是合乎逻辑的。

如果我没有将 CSS 中的“mytext”div 的高度设置为 100px，则（在我看来）正确的 offsetHeight 为 120。但在我的情况下，不在 CSS 中设置高度不是一个选项。

为什么div的offsetHeight对应css的高度，有没有替代的height属性可以反映div的实际高度，即使在css中指定了高度？

顺便说一句，我使用 Chrome 作为我的网络浏览器。

编辑我意识到我还没有完全清楚这一切的目的。最后，我想检查 div 的实际内容（动态放入 div 中）是否不会导致 div 占用超过指定的最大高度（通过将 div 的 offsetHeight 与允许的最大高度进行比较） .由于我想在 JavaScript 中检查是否是这种情况，因此使用 min-height 或 max-height 之类的属性似乎没有意义。

【问题讨论】：

您可以使用 computedStyle 方法检查高度：见My Answer here
@Ibu 'height' 属性的计算样式也返回 100(px)，参见原始 jsFiddle 中的 'report3' 值。更新：糟糕，更改丢失了，但您可以自己尝试。

标签： javascript css height

【解决方案1】：

如果你添加一个边框和一些额外的注释，你会明白为什么这是正确的并且是偏移高度：

http://jsfiddle.net/kb2vN/4/

您会注意到元素 #mytext 只占用 100 像素。内容只是溢出它。如果将内容放在元素之后，您会看到它仅在 100 px 之后开始，并且框的溢出正好在它的顶部。

我想你真正想要的是min-height:

http://jsfiddle.net/kb2vN/6/

【讨论】：

不是因为我在CSS中指定了高度吗？如果在 CSS 中禁用 'mytext' div 的高度，则 div 的 offsetHeight 会更改为 162。请参阅jsfiddle.net/kb2vN/8
因为您在 CSS 中设置了高度，所以它只“占用”了 100 像素。这就是“偏移”的意思，它与页面上其他内容的偏移量。如果您的意图是让框为 160 像素，那么您不应将其设置为静态 100 像素。如果您希望它至少为 100px 并随内容增长，那么您应该使用 min-height。
詹姆斯，谢谢你的解释。我认为你是对的，但我有一些具体的要求我还不清楚。我已经更新了我的问题。

【解决方案2】：

clientWidth 和 clientHeight 属性返回元素的实际大小。

【讨论】：

【解决方案3】：

如果您暂时将元素的高度设置为auto，那么您可以测试offsetHeight，并将元素展开以适合其内容。然后将元素的高度设置回之前的值。

【讨论】：

【解决方案4】：

你正在寻找 getScrollSize().y

http://mootools.net/docs/core/Element/Element.Dimensions

返回一个表示目标Element大小的Object，包括可滚动区域。以下方法也可用于 Window 对象。

http://jsfiddle.net/kb2vN/7/

你可以做如下比较：

if($('mytext').getScrollSize().y != $('mytext').offsetHeight) {

http://jsfiddle.net/kb2vN/11/

【讨论】：