小编典典

jQuery:height()/ width()和“ display:none”

css

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

但是在这个例子中:

HTML

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

CSS

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

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


阅读 319

收藏
2020-05-16

共1个答案

小编典典

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

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

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

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

2020-05-16