window.getComputedStyle 对 display: none 元素返回空样式是因为浏览器规范要求不可见、未布局元素不参与样式计算；需通过 offsetParent、computedStyle 及祖先链综合判断可见性，并用克隆法获取理论样式。

为什么 window.getComputedStyle 对 display: none 元素返回空样式

直接调用 window.getComputedStyle 在 display: none 或未插入 DOM 的节点上，会返回一个空的 CSSStyleDeclaration（所有属性值为 "" 或 "none"），不是因为方法失效，而是浏览器规范明确要求：不可见、未布局的元素不参与样式计算。这意味着你无法靠它读取该元素“本应有”的样式（比如 width、font-size），哪怕 CSS 规则本身是有效的。

检测隐藏节点的真实可见性状态要分三步走

不能只看 display，还要结合 visibility、opacity、父级链、content-visibility 等因素。实操中建议按顺序检查：

• 先查 node.offsetParent === null —— 这是最快速的布局可见性判断，对 display: none、position: fixed 但脱离文档流等情况都有效
• 再用 window.getComputedStyle(node) 读取 display、visibility、opacity 值：display 为 "none" 或 visibility 为 "hidden" 直接判定隐藏；opacity: "0" 需结合其他条件（如是否可交互）判断是否“逻辑隐藏”
• 向上遍历父节点，检查是否有任意祖先满足 getComputedStyle(ancestor).display === "none" —— 因为子元素即使 display: block，父级隐藏也会导致不可见

想获取 display: none 元素的“理论样式”，得临时让它参与布局

如果目标是拿到它在可见时应有的 font-size、padding 等计算值，必须让它短暂进入布局流程。常见做法是：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 克隆节点（node.cloneNode(true)），移除 display: none 并设置 position: absolute; visibility: hidden; top: -9999px;
• 将克隆体 append 到 document.body，再调用 getComputedStyle
• 立即 remove() 克隆体，避免影响页面渲染或触发重排累积
• 注意：若原节点依赖父容器宽度（如 width: 50%），克隆体需插入相同结构上下文，否则计算结果失真

示例关键片段：

const clone = node.cloneNode(true);
clone.style.cssText = 'position: absolute; visibility: hidden; top: -9999px;';
document.body.appendChild(clone);
const style = getComputedStyle(clone);
document.body.removeChild(clone);

编辑器场景下特别注意 iframe 和 Shadow DOM 边界

HTML 编辑器常嵌套 iframe 或使用 Shadow DOM，此时 getComputedStyle 的作用域受限：

立即学习“前端免费学习笔记（深入）”；

• 跨 iframe 调用会抛出 SecurityError（同源策略），必须确保在目标 iframe.contentDocument 上执行
• 在 ShadowRoot 内操作节点时，必须用 shadowRoot.host 或显式传入 shadowRoot 下的节点，否则拿到的是 light DOM 的样式
• 某些编辑器（如 CodeMirror 6 的 EditorView）用 contenteditable + 自定义渲染，节点可能被虚拟化，真实 DOM 节点并不存在 —— 此时 getComputedStyle 无意义，应改用编辑器提供的 API（如 view.domAtPos）

隐藏节点的检测逻辑看似简单，真正难的是边界情况：content-visibility: hidden、clip-path 完全覆盖、transform: scale(0)……这些都不会改变 display 或 visibility，但人眼就是看不见。别指望一个 getComputedStyle 调用包打天下。