jQuery：height（）/ width（）和“display：none” [英] jQuery: height()/width() and "display:none"

问题描述

我一直认为 display：none 的CSS样式返回0 height（）和 width（）。

I always thought elements that had display:none CSS style returned 0 for height() and width().

但在此示例中：

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

CSS

CSS

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

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

如何来？我见过0回来很多次在过去。

How come? I've seen 0 come back plenty of times in the past.

推荐答案

如果元素有 0 的.offsetWidthrel =nofollow noreferrer> offsetWidth ），在此处，然后试图找出什么高度应该是。它设置以下属性通过 jQuery.swap（） ：

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:

• position：absolute


• 显示：hidden


• block

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

然后通过 getWidthOrHeight（...） 其中通过 <$ c添加边框/填充$ c> augmentWidthOrHeight（...） ，取决于框模型，并将所有上述属性恢复为之前的值。

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.

因此，基本上它采取的元素，显示它的文件流，获得高度，然后再次隐藏，所有之前的UI线程更新，所以你从来没有看到这种情况发生。它这样做，因此 .height（） / .width（） 作品，甚至对当前隐藏的元素，只要其父级可见...因此您可以运行 .height（） / 。 width（） ，而不用在代码中执行显示/隐藏技巧，它会在 .height（） 和 .width（）

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().

这篇关于jQuery：height（）/ width（）和“display：none”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！