I always thought elements that had display:none CSS style returned 0 for height() and width().
我一直认为显示的元素：none CSS样式返回0表示height（）和width（）。
But in this example:
但在这个例子中：
HTML
<div id="target" style="display:none;">
a
</div>
CSS
alert($("#target").height());
they don't: http://jsfiddle.net/Gts6A/2/
他们没有：http：//jsfiddle.net/Gts6A/2/
How come? I've seen 0 come back plenty of times in the past.
怎么来的？我看到过去有很多次回来过。
2 个解决方案
#1
55
If an element has an offsetWidth of 0 (jQuery is considering this "hidden"), checked here, then it attempts to figure out what the height should be. It sets the following properties on the element via jQuery.swap() for the duration of the check:
如果一个元素的offsetWidth为0（jQuery正在考虑这个“隐藏”），请在此处检查，然后它会尝试找出高度应该是多少。它在检查期间通过jQuery.swap（）在元素上设置以下属性：
position: "absolute"- 位置：“绝对”
visibility: "hidden"- 能见度：“隐藏”
display: "block"- 显示：“阻止”
Then it gets the height, via getWidthOrHeight(...) which adds border/padding if necessary via augmentWidthOrHeight(...) depending on the box model, and reverts all of the above properties to their former values.
然后，它得到的高度，通过getWidthOrHeight（...），其中增加取决于盒模型边框/如果有必要通过augmentWidthOrHeight填充（...），并恢复所有上述属性来他们的前值。
So basically it's taking the element, showing it out of the flow of the document, getting the height, then hiding it again, all before the UI thread updates so you never see this happen. It's doing this so .height()/.width() works, even on elements that are currently hidden, as long as their parents are visible...so you can run .height()/.width(), without doing the show/hide trick it's doing in your code, it's handled within .height() and .width().
因此，基本上它采用元素，从文档流中显示它，获得高度，然后再次隐藏它，所有这些都在UI线程更新之前，所以你永远不会看到这种情况发生。它正在这样做.height（）/ .width（）工作，即使在当前隐藏的元素上，只要它们的父元素是可见的......所以你可以运行.height（）/ .width（），而不用显示/隐藏它在代码中执行的技巧，它在.height（）和.width（）中处理。
#2
5
EDIT
This appears to have been corrected as of jQuery 1.4.4
从jQuery 1.4.4开始，这似乎已得到纠正
Example: http://jsfiddle.net/GALc7/1/
示例：http：//jsfiddle.net/GALc7/1/
I believe this is only true for items whose parent is "display:none"
我相信这只适用于父级为“display：none”的项目
See this article on the matter http://dev.jquery.com/ticket/125
请参阅有关此问题的文章http://dev.jquery.com/ticket/125
Also, see this example (save as an .html file) or see ( http://jsfiddle.net/GALc7/ )
另外，请参阅此示例（另存为.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>
#1
55
If an element has an offsetWidth of 0 (jQuery is considering this "hidden"), checked here, then it attempts to figure out what the height should be. It sets the following properties on the element via jQuery.swap() for the duration of the check:
如果一个元素的offsetWidth为0（jQuery正在考虑这个“隐藏”），请在此处检查，然后它会尝试找出高度应该是多少。它在检查期间通过jQuery.swap（）在元素上设置以下属性：
position: "absolute"- 位置：“绝对”
visibility: "hidden"- 能见度：“隐藏”
display: "block"- 显示：“阻止”
Then it gets the height, via getWidthOrHeight(...) which adds border/padding if necessary via augmentWidthOrHeight(...) depending on the box model, and reverts all of the above properties to their former values.
然后，它得到的高度，通过getWidthOrHeight（...），其中增加取决于盒模型边框/如果有必要通过augmentWidthOrHeight填充（...），并恢复所有上述属性来他们的前值。
So basically it's taking the element, showing it out of the flow of the document, getting the height, then hiding it again, all before the UI thread updates so you never see this happen. It's doing this so .height()/.width() works, even on elements that are currently hidden, as long as their parents are visible...so you can run .height()/.width(), without doing the show/hide trick it's doing in your code, it's handled within .height() and .width().
因此，基本上它采用元素，从文档流中显示它，获得高度，然后再次隐藏它，所有这些都在UI线程更新之前，所以你永远不会看到这种情况发生。它正在这样做.height（）/ .width（）工作，即使在当前隐藏的元素上，只要它们的父元素是可见的......所以你可以运行.height（）/ .width（），而不用显示/隐藏它在代码中执行的技巧，它在.height（）和.width（）中处理。
#2
5
EDIT
This appears to have been corrected as of jQuery 1.4.4
从jQuery 1.4.4开始，这似乎已得到纠正
Example: http://jsfiddle.net/GALc7/1/
示例：http：//jsfiddle.net/GALc7/1/
I believe this is only true for items whose parent is "display:none"
我相信这只适用于父级为“display：none”的项目
See this article on the matter http://dev.jquery.com/ticket/125
请参阅有关此问题的文章http://dev.jquery.com/ticket/125
Also, see this example (save as an .html file) or see ( http://jsfiddle.net/GALc7/ )
另外，请参阅此示例（另存为.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>