jQuery：height（）/ width（）和“ display：none”

Question

我一直认为具有display:noneCSS样式的元素对于height()和返回0 width()。

但是在这个例子中：

HTML

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

CSS

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

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

Answer 1

如果元素具有offsetWidth``0（jQuery正在考虑此“隐藏”），请在此处选中，则它将尝试确定高度应为多少。在检查期间，它将通过设置元素的以下属性jQuery.swap()：

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

然后，获取高度，并根据框模型的高低getWidthOrHeight(...)添加边框/填充（如有必要）augmentWidthOrHeight(...)，并将上述所有属性还原为以前的值。

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