查找隐藏 Div 的高度:一种解决方法
通常,即使 div 的父元素是设置为“显示:无”。这可能是一个挑战,因为子 div 的 offsetHeight 将返回 0。
初始方法
已探索的解决方案涉及复制隐藏父节点的子节点到页面上可见的 div 中。然后,可以在移除节点之前测量这些元素的高度。然而,这种方法可能很复杂,并且可能并非在所有情况下都可行。
改进的解决方案
更强大的方法是使用像 YUI 2 这样的库来识别隐藏元素(“display:none”或高度和宽度为 0)并使它们可见。从有问题的子元素开始,遍历所有祖先并使其可见,直到找到可见的父元素。这允许测量子元素的尺寸。测量所有元素后,将恢复其原始显示值。
注意事项
需要注意的是,使隐藏元素可见会影响页面布局和内容可见性。确保这种情况发生的时间很短并且不会破坏用户体验至关重要。
此外,将元素复制出其原始父层次结构时应小心。当元素与其父上下文分离时,样式可能无法正确应用。
以上是如何在 JavaScript 中测量隐藏 Div 的高度?的详细内容。更多信息请关注PHP中文网其他相关文章!

文章讨论了CSS FlexBox,这是一种布局方法,用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法,将其与CSS网格进行了比较,并详细浏览了浏览器支持。

本文讨论了使用CSS创建响应网站的技术,包括视口元标签,灵活的网格,流体媒体,媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用,并推荐CSS框架

本文讨论了CSS盒装属性,该属性控制了元素维度的计算方式。它解释了诸如Content-Box,Border-Box和Padding-Box之类的值,以及它们对布局设计和形式对齐的影响。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

记事本++7.3.1
好用且免费的代码编辑器

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能