jQuery:height()/ width()和“display:none”

我总是认为具有display:none CSS样式的元素对于height()width()返回0。

但在这个例子中:

HTML

 <div id="target" style="display:none;"> a </div> 

CSS

 alert($("#target").height()); 

他们不: http : //jsfiddle.net/Gts6A/2/

怎么来的? 我以前见过很多次。

如果一个元素的offsetWidth0 (jQuery正在考虑这个“隐藏”), 在这里检查 ,然后它试图找出高度应该是什么。 它在检查期间通过jQuery.swap()在元素上设置以下属性 :

  • position: "absolute"
  • visibility: "hidden"
  • display: "block"

然后通过getWidthOrHeight(...)获取高度,通过augmentWidthOrHeight(...)根据盒子模型添加边框/填充,并将所有上述属性恢复为原先的值。

所以基本上它是把元素,从文档的stream程中显示出来,获得高度,然后再次隐藏它,所有在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>