Computed Style 是浏览器渲染引擎计算出的元素最终样式快照，涵盖内联、CSS文件、继承及媒体查询结果；style属性仅反映内联样式，无法获取层叠后的真实值。
Computed Style 是什么，为什么不能直接读 style 属性
DOM 元素的 style 属性只反映内联样式（即 element.style.color），对 CSS 文件、<style> 标签或继承/层叠计算出的值完全不可见。而 getComputedStyle 返回的是浏览器渲染引擎最终应用到该元素上的完整样式快照——包括单位、默认值、继承值和媒体查询生效后的结果。
注意：getComputedStyle 返回的是只读的 CSSStyleDeclaration 对象，所有属性都是字符串（如 "16px"、"rgb(255, 0, 0)"），没有自动类型转换。
如何正确调用 getComputedStyle 并读取数值
必须确保元素已挂载到 DOM 且完成样式计算，否则可能返回空值或默认值（如 display: "none" 时多数尺寸为 "0px"）。
- 使用
getComputedStyle(element)获取对象，不传第二个参数即默认获取伪元素::before和::after以外的主样式 - 读取具体属性用方括号或点语法：
computed.width或computed["font-size"]（带短横线的需加引号） - 若需数值参与计算，用
parseFloat()提取数字部分：parseFloat(computed.fontSize)→16 - 避免直接读
computed.height判断是否“有高度”：它可能是"auto"、"100%"或"fit-content"，需结合offsetHeight或clientHeight辅助判断
常见陷阱：display: none、未渲染、伪元素
getComputedStyle 在元素 display: none 时仍返回对象，但几何属性（width、height、top 等）基本是 "0px" 或 "auto"，不代表真实布局值。此时应改用 offsetWidth/offsetHeight（它们在 display: none 下也返回 0），或先临时设为 visibility: hidden; position: absolute 再测量。
立即学习“前端免费学习笔记（深入）”；
- 元素尚未 append 到 document 时，
getComputedStyle可能返回空对象或不完整样式（尤其在 SSR 或 Shadow DOM 中） - 读取伪元素样式必须传第二个参数：
getComputedStyle(el, "::before")，否则返回null - 某些属性（如
transform）返回矩阵字符串（"matrix(1, 0, 0, 1, 0, 0)"），需额外解析才能得数值
实际调试建议：在 DevTools Console 中快速验证
在 Chrome/Firefox 的 Elements 面板选中元素后，直接在 Console 输入：getComputedStyle($0).fontSize（$0 指当前选中元素）。这是最可靠的实时验证方式。
如果发现值与预期不符，优先检查：display 是否为 none、元素是否在文档流中、CSS 是否被更高优先级规则覆盖（看 Computed 面板右侧的“Sources”列）、是否处于未激活的媒体查询断点内。这些因素都会让 getComputedStyle 返回“合理但非所求”的结果。
