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/
怎么来的？ 我以前见过很多次。
如果一个元素的offsetWidth为0 （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>
