需要在页面上找到隐藏的div的高度(设置为显示:无)

我需要测量隐藏元素内部的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。

回答:

你需要

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

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

我们认为在执行的Prototype.js这种做法,但结束了getWidthgetHeight ,而无需遍历祖先。

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

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

<div class="bar">...</div>

</div>

和这些规则:

.bar { width: 10em; }

.foo .bar { width: 15em; }

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

以上是 需要在页面上找到隐藏的div的高度(设置为显示:无) 的全部内容, 来源链接: utcz.com/qa/411429.html

回到顶部