jQuery：高度（）/宽度（）和“显示：无”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3632120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: height()/width() and "display:none"
提问by Foobarbis
I always thought elements that had display:noneCSS style returned 0 for height()and width().
我一直认为具有display:noneCSS 样式的元素为height()和返回 0 width()。
But in this example:
但在这个例子中：
HTML
HTML
<div id="target" style="display:none;">
a
</div>
CSS
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.
怎么来的？我过去曾多次看到 0 回来。
回答by Nick Craver
If an element has an offsetWidthof 0(jQuery is considering this "hidden"), checked here, then it attempts to figure out what the height should be. It setsthe following propertieson the element via jQuery.swap()for the duration of the check:
如果一个元素的offsetWidth的0（jQuery是考虑这个“隐藏”），检查这里的话，试图弄清楚的高度应该是什么。它通过在检查期间在元素上设置以下属性jQuery.swap()：
position: "absolute"visibility: "hidden"display: "block"
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()。
回答by Brandon Boone
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"
我相信这仅适用于父项为“显示：无”的项目
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>
