我一直认为具有display:noneCSS样式的元素对于height()和返回0 width()。
display:none
height()
width()
但是在这个例子中:
<div id="target" style="display:none;"> a </div>
alert($("#target").height());
怎么来的?我已经看到0在过去多次返回。
如果元素具有offsetWidth``0(jQuery正在考虑此“隐藏”),请在此处选中,则它将尝试确定高度应为多少。在检查期间,它将通过设置元素的以下属性jQuery.swap():
offsetWidth``0
jQuery.swap()
position: "absolute"
visibility: "hidden"
display: "block"
然后,获取高度,并根据框模型的高低getWidthOrHeight(...)添加边框/填充(如有必要)augmentWidthOrHeight(...),并将上述所有属性还原为以前的值。
getWidthOrHeight(...)
augmentWidthOrHeight(...)
因此,基本上是在UI线程更新之前,将元素从文档流中显示出来,获取高度,然后再次隐藏,因此您永远不会看到这种情况。这样,即使在当前隐藏的元素上,只要它们的父母可见,它就可以.height()``.width()起作用…因此您可以运行[.height()/.width(),而无需执行在代码中执行的show /hide技巧,它可以在.height()和中处理.width()。
.height()``.width()
.height()
.width()