当前位置: 首页 > 面试题库 >

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

史淇
2023-03-14
问题内容

我需要测量隐藏元素内部的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值重新设置为原始值。

当然,还有html" target="_blank">性能方面的问题。

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

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

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

和这些规则:

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

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



 类似资料:
  • 我的jsp中有一个这样的tr。 我也有这样的选择。 select中使用的javascript函数如下所示。 因此,如果所选行不是0,我将不会在页面中显示tr。这很好用 我在请求中设置了dateRange变量。setAttribute()并从操作发送它 问题是从请求值中正确地选择了选项,但是没有显示tr 我尝试在jsp中的表单外部这样运行它,希望它能在页面加载之前执行,但没有发生。 有什么想法吗?

  • 问题内容: 在隐藏其父级Div的同时如何显示子Div?能做到吗? 我的代码如下: 问题答案: 我认为这是不可能的。 您可以使用javascript将元素拉出,或复制元素然后显示。 在jQuery中,您可以复制一个元素 然后附加到任何适当的可见元素。

  • 问题内容: 对于我正在做的网站,我想加载一个div,然后隐藏另一个,然后有两个按钮可以使用JavaScript在div之间切换视图。 这是我当前的代码 替换div2的第二个功能不起作用,但第一个功能起作用。 问题答案: 如何显示或隐藏元素: 为了显示或隐藏元素,请操纵元素的style属性。在大多数情况下,您可能只想更改元素的属性: 或者,如果您仍然希望元素占用空间(例如,如果您要隐藏表格单元格),

  • 对于我正在做的一个网站,我想加载一个div并隐藏另一个,然后有两个按钮可以使用JavaScript在div之间切换视图。 这是我当前的代码 null null 取代div2的第二个函数不起作用,但第一个是。

  • 我需要显示/隐藏div按钮根据导航-列表div高度溢出,如果列表是溢出然后显示按钮否则隐藏它。 jQuery HTML

  • 问题内容: 在Web应用程序中,我的页面包含一个DIV,该DIV的自动宽度取决于浏览器窗口的宽度。 我需要该对象的自动高度。DIV从顶部屏幕开始约300像素,其高度应使其延伸到浏览器屏幕的底部。我有一个容器DIV的最大高度,所以div的最小高度必须是最小。我相信我可以将其限制在CSS中,并使用Javascript处理DIV的大小。 我的JavaScript不够理想。我可以编写一个简单的脚本来为我做