需要在页面上找到隐藏的div的高度（设置为display:none）

Question

我需要测量隐藏元素内部的 div 的 offsetHeight。

 <div id="parent" style="display: none;">
    <div id="child">Lorem Ipsum dolor sit amet.</div>
</div>

父 div 必须 设置为“ display:none ”。我无法控制那个。我意识到子 div 的 offsetHeight 将为 0。我需要找到解决方法。

我玩过的是当页面加载时，我复制父节点的子节点，在页面上注入一个设置为“ visiblity:hidden ”的div。然后我测量这些元素的高度，完成后移除节点。

还有其他想法吗？

更新： 我最终要做的是：

使用 YUI 2，在页面加载时，我发现给定类名的所有元素都设置为显示：无，或者其高度和宽度为 0（这是衡量元素是否存在或父元素是否设置为显示的一种方法：没有任何）。然后我将该元素设置为显示：块。然后我检查了它的父母是否有同样的东西并展示了父母，直到它找到一个可见的父母。一旦最高显示：无祖先设置为显示：块，我就可以测量我的元素。

测量完所有元素后，我将所有元素重置为显示：无。

原文由 Jamis Charles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在获取元素的尺寸时，您需要在非常短的时间内 使元素的父级可见。在通用解决方案中，通常会遍历所有祖先并使其可见。然后他们的 display 值被设置回原来的值。

当然还有性能问题。

我们在 Prototype.js 实现中考虑了这种方法，但最终以 getWidth 和 getHeight 使实际元素可见，而无需遍历祖先。

替代解决方案的问题——例如从“隐藏”父元素中取出元素——是某些样式一旦脱离其“常规”层次结构就可能不再适用于该元素。如果你有这样的结构：

 <div class="foo" style="display:none;">
  <div class="bar">...</div>
</div>

这些规则：

 .bar { width: 10em; }
.foo .bar { width: 15em; }

然后将元素从其父元素中取出实际上会导致尺寸错误。

原文由 kangax 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

如果使用 style.display = "none" ，元素的宽度和高度将为 0，

但是使用 style.visibility = "hidden" 代替，元素将具有浏览器计算的宽度和高度（通常）。

原文由 Not a privileged user 发布，翻译遵循 CC BY-SA 3.0 许可协议