隐藏元素的真实尺寸需临时恢复布局后测量：对display:none元素，改display+visibility:hidden+absolute；对visibility:hidden或opacity:0可直接读取；复杂场景用clonenode+body挂载测量，注意字体、响应式单位及ssr兼容性。
隐藏元素（如 display: none 或父级被隐藏）无法通过 offsetWidth/offsetHeight、getBoundingClientRect() 等常规方式获取真实尺寸，因为它们在渲染树中被完全移除或未布局。要获取其“本应有”的宽高，核心思路是：**临时让元素可见并参与布局，测量后再恢复原状**。关键在于不触发页面重排闪烁，且兼容各种隐藏方式。
适用于 display: none 的元素
这是最常见也最难处理的情况。由于 display: none 元素完全脱离文档流，必须临时改为 block（或对应原标签的默认显示类型，如 inline、flex）并设为不可见但占位，再测量：
- 将
display改为block（或查getComputedStyle(el).display原值更稳妥） - 设置
visibility: hidden和position: absolute，避免影响页面布局和视觉 - 确保父容器有明确宽度（尤其内联元素），必要时临时复制父级样式（如
font、padding） - 调用
el.offsetWidth/el.offsetHeight或getBoundingClientRect() - 立即还原所有样式（推荐用
el.style.cssText = oldStyle批量恢复）
适用于 visibility: hidden 或 opacity: 0 的元素
这类元素仍在渲染树中、参与布局，可直接测量：
-
visibility: hidden元素仍占据空间，offsetWidth/offsetHeight返回真实值 -
opacity: 0不影响布局，同样可直接读取尺寸 - 注意：若父级是
display: none，子元素无论自身样式如何都无效，需向上追溯并处理父级
通用安全方案：cloneNode + 临时挂载
对复杂样式、CSS 动画、伪元素等不确定场景，最可靠的方式是克隆元素，临时插入到 body 末尾测量：
- 用
el.cloneNode(true)深克隆，保留所有子节点和内联样式 - 清除可能影响尺寸的属性：如
position: absolute/fixed、transform、animation - 设置
visibility: hidden、position: absolute、top: -9999px防止闪动 - 追加到
document.body，强制触发重排后读取尺寸 - 立即
remove()克隆节点，避免内存泄漏
注意事项与避坑点
实际使用中容易忽略这些细节：
- 字体加载未完成时测量，可能导致宽度偏小——可监听
document.fonts.load()或加延时 - 响应式单位（
em、rem、%）依赖上下文，临时挂载时需确保父容器样式一致 - 不要用
clientWidth/clientHeight，它忽略边框和滚动条，且对隐藏元素返回0 - 服务端渲染（SSR）环境无 DOM，需判断
typeof window !== 'undefined'
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
