jquery使用height()返回元素高度总是为0

原创于 2015-05-09 17:15:37 发布 · 2.0k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

前台&美工专栏收录该内容

118 篇文章

订阅专栏

本文详细探讨了使用jQuery获取元素高度时返回0的问题，深入分析了导致这种现象的原因，并通过加入clearfix样式成功解决了问题。文章重点介绍了浮动元素对父元素高度的影响及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[url]http://my.oschina.net/qii/blog/412763[/url]

var mObj = $('#menu_list');
var mHeight = mObj.height();
console.log(mHeight);//0

当我在console里面，直接获取元素的高度，又是正常的。

$('#menu_list').height();//45

百度了一下，jQuery使用height()返回0的问题，都是说因为jQuery无法获取隐藏元素.但是我的元素是显示的，并没有隐藏。

仔细想了下，想起来是菜单下面的元素使用了float属性。而float属性，会导致父元素的高度为0.以前在chrome或者Firefox下查看元素，父元素的高度都会是0.chrome的标尺会直接标出来是0，而Firefox下，则会看不到父元素。

想到了这点，就开始验证。

.clearfix:after{display: block;height:100%;_height:100%;clear:both;content:'\020';}
.clearfix{zoom:1;}

加入clearfix的样式

<ul id="menu_list" class="clearfix">
....
</ul>

再次刷新页面：

console.log(mHeight);//45

OK!