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

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

尽管流行的假设是带有 "display" 的元素:none" 对于 jQuery 的 .height() 和 .width() 方法返回零，但情况并非总是如此。在提供的示例中，目标元素即使隐藏，也会返回非零高度。

为什么会发生这种情况？

根据 jQuery 的源代码，如果一个元素的 offsetWidth 为 0 (表明 jQuery 认为它是“隐藏的”），采取一系列步骤来确定高度：

1. 元素的位置设置为“绝对”。
2. 可见性设置为“隐藏”。
3. 显示设置为“块”。

这有效地将元素移出文档流，在考虑边框/填充的同时计算高度，然后恢复之前的设置。

因此，jQuery 本质上是在 UI 实际更新之前使元素暂时可见，计算高度，然后再次使其不可见。这使得 .height() 和 .width() 甚至可以在隐藏元素上工作，只要它们的父元素可见。

.height() 和 .width() 方法在内部处理这个显示/隐藏过程，因此开发人员不需要在代码中手动实现此类检查。

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