为什么 jQuery 的 `height()` 和 `width()` 函数返回带有 `display: none` 的元素值？

jQuery：height()/width() vs. "display:none"

您可能假设具有 CSS 样式的元素在 jQuery 中，“display:none”的 height() 和 width() 将返回 0。然而，正如提供的示例所示，情况并非总是如此。

为什么会发生这种情况？为了理解这种行为，我们需要深入研究 jQuery 如何处理隐藏元素。

如果元素的 offsetWidth 为 0（jQuery 将其解释为“隐藏”），它会尝试确定其高度。它通过暂时改变元素的样式来实现此目的：

• 位置：“绝对”
• 可见性：“隐藏”
• 显示：“块”

一旦通过 getWidthOrHeight(...) 获取高度并根据需要调整边框和填充，就会恢复之前的样式。

本质上，jQuery 会获取隐藏元素，暂时显示它在文档流之外，检索其高度，然后再次隐藏它，所有这些都不会影响页面的视觉外观。这使得 height() 和 width() 甚至可以为隐藏元素提供准确的测量，前提是它们的父元素可见。

此机制内置于 jQuery 的 height() 和 width() 方法中，消除了您的需要手动操作元素的可见性。

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