为什么 jQuery 的 `height()` 和 `width()` 对于具有 `display:none` 的元素返回非零值？

jQuery 的非传统 Height() 和 Width() 行为与“display:none”

jQuery 的 height() 和 width() 方法是广泛用于确定网页上元素的可见尺寸。然而，在处理设置了 CSS 属性“display:none”的元素时，似乎会出现意外的行为。

问题

传统上，人们相信具有“display:none”的元素的高度和宽度为零。然而，jQuery 的情况并非总是如此。考虑以下示例：

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

<code class="css">alert($("#target").height());</code>

在此示例中，“目标”元素的高度不为零，而是一个非零值。这种不一致引发了一个问题：为什么带有“display:none”的元素有时会在 jQuery 中返回非零高度和宽度？

答案

要理解这种行为，我们需要深入研究 jQuery 的 height() 和 width() 方法的内部工作原理。当元素的可见 offsetWidth 为 0（表示它是“隐藏”）时，jQuery 会尝试计算其实际尺寸。它通过暂时覆盖元素的 CSS 属性来实现此目的：

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

通过这些修改，jQuery 会检索元素的高度，并根据需要考虑边框和填充。一旦确定了高度，jQuery 就会恢复原始的 CSS 属性，确保不会发生可见的更改。

此过程允许 height() 和 width() 对于隐藏元素正确工作，只要它们的父元素可见。本质上，jQuery 模拟了在文档流之外显示元素、检索其尺寸，然后再次隐藏它的行为，所有这些都在幕后通过单个操作完成。这消除了开发人员手动显示和隐藏元素来获取其尺寸的需要。

以上是为什么 jQuery 的 `height()` 和 `width()` 对于具有 `display:none` 的元素返回非零值？的详细内容。更多信息请关注PHP中文网其他相关文章！