获取一个div的高度

Question

<span style="width:100%" id="learning_menu"><div id="aLM" style="width:100%;height:100%">test | test | test</div></span>

上面的代码是我当前拥有的HTML代码。我将使用jQuery来使内部的“div”收缩和扩展。但我无法获取span/div的高度。我不会在CSS中设置特定值，因为它可能会因浏览器而异。因此，我的JavaScript（style.height）总是返回0。

有什么想法吗？

- Freesnöw

---

可能是如何获取元素的渲染高度？的重复问题。 - Penny Liu

Answer 1

以下是纯JS实现，无需使用jQuery：

document.getElementById("learning_menu").offsetHeight;

- Naftali

---

而且它在各种浏览器中都很兼容。+1 - Matt Ball

@MattBall，是的，确实如此，而且不需要不必要的jQuery。 - Naftali

我一开始使用它时毫无用处，这就是我来到这里的原因。我正在使用jQuery，所以使用它对我来说并不麻烦 ;) - Freesnöw

@Neal - 但是如果 Div 被隐藏了，那么它会返回高度为 '0'。有什么想法吗？ - prog1011

Answer 2

使用jQuery：那将是.height()方法。

var span_height = $('#learning_menu').height(),
    div_height = $('#aLM').height();

注意：将块级元素（在本例中为<div>）放置在行内元素（<span>）中是无效的HTML。

- Matt Ball

---

谢谢你的帖子！我会选择BnW的，因为他在用法方面提供了更多细节。 - Freesnöw

Answer 3

嗯，我不确定我是否理解了你的问题，但是...从纯JavaScript中，您可以使用元素的clientHeight（或offsetHeight）属性以获取其高度（以像素为单位）。从jQuery中，只需使用.height()方法（实际上是一个浏览器不可知的包装器，围绕clientHeight属性）。

- oddy

Answer 4

$("#learning_menu").height() 会返回 span 元素的高度

- BnW

---

我会授予您“答案”，因为您给了我一个完整的代码示例。非常感谢！现在它运行得很好 :) - Freesnöw

这个回答使用了最无用的库，有很多网络开发人员在使用它，以至于找不到真正了解JavaScript并能解释其内部机制的人，总是jQuery，我越来越讨厌它。 - Iharob Al Asimi

@iharob，jQuery 一行代码就能满足你所有需求，为什么要把事情搞得复杂呢？此外，OP 希望使用 jQuery 解决问题。如果你想知道如何使用纯 JavaScript 实现，应该另外提出一个问题。 - BnW