getComputedStyle返回的是一个CSSStyleDeclaration对象，包含元素所有最终计算样式值（如"200px"而非"50%"），该对象只读、实时更新、属性名采用驼峰式，所有值均为字符串。
getComputedStyle 返回的是什么值？
getComputedStyle 返回的是一个 CSSStyleDeclaration 对象，它包含元素最终应用到渲染上的所有 CSS 属性计算值（computed values），不是声明值（declared values），也不是初始值或继承值。比如你写了 width: 50%，但父容器宽 400px，那它返回的 width 就是 "200px"（字符串），而不是 "50%"。
- 这个对象是只读的，不能写入
- 它反映的是浏览器实际布局后“生效”的值，受盒模型、继承、媒体查询、用户代理样式等共同影响
- 即使 CSS 中没显式设置某属性（比如
color），它也会返回继承来的计算值（如"rgb(34, 34, 34)"）
为什么 getComputedStyle 有时返回 auto 或 0px？
这是最常被误以为“出错了”的情况，其实恰恰说明它工作正常：
-
height、width在未显式设置且内容未撑开时，常返回"auto" -
top、left等定位偏移，在非定位元素上返回"auto" -
margin、padding如果由用户代理样式或重置规则控制，可能返回"0px"，但要注意：某些浏览器对margin的 computed 值会合并（比如上下 margin 折叠后不体现） - 若元素未插入 DOM 或
display: none，大多数尺寸类属性（width、height、offsetTop等）仍可能返回"0px"或"auto"，因为无布局（layout）
实操建议：
- 确认元素已挂载到 DOM 且
display !== "none"（可用getComputedStyle(el).display检查） - 需要精确尺寸时，优先考虑
el.getBoundingClientRect()，它返回像素数值对象，更可靠 - 想获取原始声明值（比如调试 CSS 变量来源），得用
window.getMatchedCSSRules()（已废弃）或CSS.supports()+ 手动遍历document.styleSheets，但兼容性差，不推荐
如何安全读取 getComputedStyle 的属性值？
直接访问 computed.width 或 computed["font-size"] 都可以，但要注意命名规范：
立即学习“前端免费学习笔记（深入）”；
- CSS 属性名在 JS 中需转为驼峰（
font-size→fontSize，background-color→backgroundColor） - 有连字符的属性必须用方括号（
computed["z-index"]），点号会报错 - 所有返回值都是字符串（包括
"16px"、"bold"、"rgba(0, 0, 0, 0.8)"），需手动解析数字部分（例如用parseFloat(computed.fontSize)提取 16）
常见陷阱：
-
computed.opacity返回字符串"0.5"，不是数字，直接参与运算会隐式转成 NaN（如果前面有 + 号等） -
computed.transform返回矩阵字符串（如"matrix(1, 0, 0, 1, 0, 0)"），不是对象，要解析得靠DOMMatrix或正则 -
computed.display可能返回"flex"、"-webkit-flex"（旧 Safari），注意前缀兼容性
getComputedStyle 和 offsetWidth/offsetHeight 有什么区别？
offsetWidth 和 offsetHeight 是只读属性，返回元素整个盒子的整数像素宽高（含 padding + border + scrollbar，不含 margin），而 getComputedStyle(el).width 返回的是 width 样式属性的计算值（即 content box 宽度，单位是字符串 px 或 % 等）。
-
offsetWidth总是整数，getComputedStyle可能带小数（如 subpixel 渲染） -
offsetWidth在元素不可见（display: none）时返回 0；getComputedStyle在该情况下仍可读取，但尺寸类属性多为"auto" -
getComputedStyle能读取所有 CSS 属性（颜色、字体、阴影等），offset*系列仅限几何尺寸
简单选型建议：
- 要拿颜色、字体、透明度、动画状态 → 用
getComputedStyle - 要拿真实渲染尺寸用于 layout 计算 → 优先用
getBoundingClientRect()，其次offsetWidth/offsetHeight - 要判断是否“真正可见”（不仅 display，还要考虑 visibility、opacity、transform: scale(0)）→ 得组合多个 API，
getComputedStyle只是其中一环
真实项目里最容易被忽略的，是元素是否处于“布局完成”状态——比如在 Vue 的 mounted 钩子或 React 的 useEffect(() => {}, []) 里调用 getComputedStyle，看似安全，但如果组件内部触发了异步样式加载或字体加载（@font-face），计算值可能还不是最终结果。需要时得监听 fontload 事件或用 ResizeObserver 补偿。
