我总是认为具有display:noneCSS样式的元素为height()和返回0 width().
但在这个例子中:
<div id="target" style="display:none;">
a
</div>
alert($("#target").height());
他们没有:http://jsfiddle.net/Gts6A/2/
怎么会？我看到过去有很多次回来过.
Nic*_*ver 55
如果一个元素的offsetWidth的0(jQuery是考虑这个"隐藏"),检查这里的话,试图弄清楚的高度应该是什么.它在检查期间在元素via上设置以下属性jQuery.swap():
position: "absolute"visibility: "hidden"display: "block"然后它获取高度,通过getWidthOrHeight(...)该高度,augmentWidthOrHeight(...)根据框模型添加边框/填充,并将所有上述属性恢复为以前的值.
所以基本上它正在接受元素,从文档流中显示它,获得高度,然后再次隐藏它,所有这些都在UI线程更新之前,所以你永远不会看到这种情况发生.它这样做,那么.height()/ .width()作品,甚至在当前隐藏,只要他们的父母是可见的元素......这样你就可以运行.height()/ .width(),而不做显示/隐藏把戏它做在你的代码,它的内部处理.height()和.width().
从jQuery 1.4.4开始,这似乎已得到纠正
示例:http://jsfiddle.net/GALc7/1/
我相信这只适用于父级为"display:none"的项目
请参阅有关此问题的文章http://dev.jquery.com/ticket/125
另外,请参阅此示例(另存为.html文件)或查看(http://jsfiddle.net/GALc7/)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("#target").height());
});
</script>
</head>
<body>
<div id="parent" style="display:none;">
<div id="target" style="height:100px;display:block;">
a
</div>
</div>
</body>
</html>