jquery - 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/

怎么来的？我已经看到0在过去多次返回。

最佳答案

如果一个元素的 offsetWidth 为0(jQuery正在考虑将此“隐藏”)为checked here，则它会尝试确定高度应为多少。在检查期间，它通过sets在元素上properties以下 jQuery.swap() :

position: "absolute"

visibility: "hidden"

display: "block"

然后，它通过 getWidthOrHeight(...) 获得高度，该高度取决于框模型(如果需要)通过 augmentWidthOrHeight(...) 添加边框/填充，并将上述所有属性还原为以前的值。

因此，基本上，它是在UI线程更新之前，将元素从文档流中显示出来，获取高度，然后再次隐藏，因此您永远不会看到这种情况。这样做是为了 .height() / .width() 即使在当前隐藏的元素上也可以工作，只要它们的 parent 可见，因此...您可以运行 .height() / .width() ，而无需执行代码中显示/隐藏的技巧，就可以了在 .height() 和 .width() 中。

关于jquery - jQuery:height()/width()和 “display:none”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3632120/