display: none 的元素 offsetWidth/offsetHeight 总是 0，因其不生成盒模型、不参与布局计算，W3C 规定其“不在格式化上下文中”，故无几何信息；clientWidth、scrollWidth 同样为 0，getComputedStyle 返回声明值而非实际尺寸。
display: none 的元素为什么 offsetWidth/offsetHeight 总是 0
因为 display: none 会让浏览器彻底跳过该元素的布局计算——它不生成盒模型、不参与重排、不占空间，自然也没有渲染后的尺寸。哪怕 DOM 存在、样式表里写了 width: 200px，JS 调用 offsetWidth 或 getBoundingClientRect() 一律返回 0。
这不是 bug，是规范行为。W3C 明确规定：display: none 的元素“不在格式化上下文中”，即没有几何信息可读。
- 即使父容器是 visible，子元素设了
display: none，也无法通过祖先链反推尺寸 -
clientWidth、scrollWidth同样为0，且getComputedStyle(el).width返回的是 CSS 声明值（如"200px"），但不是实际渲染宽 - 想绕过？别试
el.style.display = "block"后立刻读——DOM 未重排，结果仍是0；必须触发强制重排（如el.offsetHeight），但代价高、易抖动
visibility: hidden 是更安全的“假隐藏”方案
visibility: hidden 不脱离文档流，元素照常布局、占位、计算尺寸，只是视觉不可见。所以 offsetWidth、getBoundingClientRect() 全部可用，且值准确。
- 注意：它不支持
transition动画（CSS 规范限制），但你可以搭配opacity: 0实现淡出效果 - 父元素设
visibility: hidden，子元素即使设visibility: visible也无效——这是继承+强制覆盖机制，不是 bug - 屏幕阅读器默认仍会读取
visibility: hidden内容（无障碍友好），若需隐藏语义，请加aria-hidden="true"
需要真隐藏又得读尺寸？用绝对定位移出可视区
当既要保持 display: none 的彻底隐藏语义（比如避免交互、节省渲染资源），又要读尺寸时，通用解法是临时把元素“挪走”：设 position: absolute + left: -9999px（或 top: -9999px），再设 visibility: visible 和 display: block，读完立刻还原。
- 关键点：不能只改
display，否则还在原位置触发重排，导致页面抖动 - 还原时务必恢复原始
position值（可能是static、relative等），不能硬写position: static—— 会覆盖原有定位上下文 - 更稳妥的做法是提前缓存原始样式：
const originalStyle = el.getAttribute('style') || ''，读完后el.setAttribute('style', originalStyle)
容易被忽略的细节：hidden 属性和 display 冲突
HTML5 的 hidden 布尔属性本质就是 display: none 的语法糖（浏览器默认样式为 [hidden] { display: none; }）。如果同时写了 hidden 和 style="visibility: hidden"，后者会被前者覆盖——因为 [hidden] 选择器权重更高（属性选择器 > 行内 style 中的单个声明）。
调试时打开 DevTools 的 Computed 面板，直接看最终生效的 display 和 visibility 值，比猜规则更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
