需要在页面上找到隐藏的div的高度（设置为显示：无）

小编典典

需要在页面上找到隐藏的div的高度（设置为显示：无）

html

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

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

父div 必须设置为“ display:none”。我对此无能为力。我意识到子div的offsetHeight将为0。我需要找到一种解决方法。

我最喜欢的是页面加载时，我复制了parent的子节点，在设置为“ visiblity:hidden” 的页面上插入div
。然后，我测量这些元素的高度，并在完成后删除节点。

还有其他想法吗？

更新： 我最后要做的是：

使用YUI
2，在页面加载时，我发现给定类名的所有元素要么设置为display：none，要么其高度和宽度为0（这是一种测量元素是否存在或将父级设置为显示的方法：没有）。然后，我将该元素设置为display：block。然后，我检查了它的父对象是否相同，并显示了父对象，直到找到可见的父对象为止。将display：none的最高祖先设置为display：block后，就可以测量元素了。

测量完所有元素后，我将所有元素重置为display：none。

阅读 459

2020-05-10

共1个答案

小编典典

你需要 做元素的父可见
的，而你得到元素的尺寸是一个非常短暂的瞬间。在通用解决方案中，通常遍历所有祖先并使其可见。然后将它们的display值重新设置为原始值。

当然，还有性能方面的问题。

我们认为在执行的Prototype.js这种做法，但结束了getWidth和getHeight 制造只有实际的元素可见 ，而无需遍历祖先。

替代解决方案的问题-例如将元素从“隐藏”父级中移除-一旦元素脱离其“常规”层次结构，某些样式可能不再适用于该元素。如果您具有这样的结构：

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

和这些规则：

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

那么将元素从其父元素中移除实际上会导致尺寸错误。

2020-05-10