为何CSS设置了display:none后无法获取宽度_改用visibility:hidden或移出可视区

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 值，比猜规则更快。