getComputedStyle 返回浏览器实际渲染后的最终 CSS 值，非 JS 修改的中间态；需强制重排（如读 offsetHeight）才能获取最新值，且属性名须用短横线格式（如'background-color'），transform 等返回标准化格式（如 matrix()），频繁调用易引发强制同步布局。
不能直接获取动态计算值，getComputedStyle 返回的是当前渲染状态下的最终 CSS 值（已解析、已继承、已转换），但“动态”若指 JS 实时修改后未触发重排/重绘的中间态，则它根本读不到——它只读浏览器实际应用后的结果。
为什么 getComputedStyle 看起来“不实时”？
常见误解是：改了 style 属性，立刻调用 getComputedStyle 就该返回新值。但实际中常拿到旧值，原因如下：
- 浏览器可能将多个 DOM 写操作批量延迟处理（如连写
el.style.width和el.style.height），直到下一帧才计算样式 - JS 执行期间，样式计算不一定立即触发；需强制重排（如读取
offsetHeight）才能让变更落地 - 如果目标元素尚未插入文档（
display: none或未挂载），getComputedStyle仍返回值，但部分属性（如width、height）可能为auto或0px，并非“未计算”，而是按规范计算出的结果
getPropertyValue 的参数必须是标准 CSS 属性名（不是驼峰）
传错属性名会静默返回空字符串，不报错，极易误判为“没生效”。例如：
// ❌ 错误：驼峰式写法（JS 常见习惯）
window.getComputedStyle(el).getPropertyValue('backgroundColor')
// ✅ 正确：kebab-case，且区分大小写（注意 -webkit-transform 等前缀需完整）
window.getComputedStyle(el).getPropertyValue('background-color')
window.getComputedStyle(el).getPropertyValue('-webkit-transform')
window.getComputedStyle(el).getPropertyValue('font-size')
- 所有 CSS 属性名必须用短横线分隔（
font-size，非fontSize） - 带厂商前缀的属性（如
-webkit-transform）需显式写出，不能省略-webkit- - 自定义属性（CSS 变量）要加
--前缀：getPropertyValue('--primary-color')
读取 transform / opacity 等合成属性时要注意返回格式
这些属性被解析后不再是原始字符串，而是标准化后的值，容易和预期不符：
// 假设 el.style.transform = 'translateX(20px) rotate(30deg)'
const computed = window.getComputedStyle(el)
computed.getPropertyValue('transform') // "matrix(0.866, 0.5, -0.5, 0.866, 20, 0)"
computed.getPropertyValue('opacity') // "1"（即使设为 0.999，也常四舍五入显示为 "1"）
-
transform总是返回matrix()或matrix3d()形式，无法直接还原原始函数链 -
opacity返回字符串，需parseFloat()才能参与计算 -
color、background-color返回rgb(…)或rgba(…)字符串，不是十六进制 - 百分比单位（如
width: 50%）会被转成绝对像素值（如"240px"），前提是父容器尺寸已确定
真正需要“监听动态变化”时，别依赖轮询 getComputedStyle
频繁调用它可能触发强制同步布局（forced synchronous layout），导致卡顿。更合理的做法是：
- 对
transform、opacity等合成属性，优先使用requestAnimationFrame+ 一次读取，避免在循环里反复调用 - 监听动画状态：用
animationstart/animationend或transitionend事件代替轮询 - 需要精确跟踪 CSS 变量变化？改用
MutationObserver监听style属性或:root上的style变更，再手动触发重读 - 若涉及 ResizeObserver 不覆盖的场景（如 font-size 响应式变化），可结合
ResizeObserver+getComputedStyle，但仅在回调内读一次
最常被忽略的一点：你读到的“动态值”，其实是浏览器在某个时间点完成样式计算与布局后的快照——它从不预测、也不缓存未来状态。任何想绕过渲染管线直接拿到“JS 修改意图”的尝试，都会撞上这个边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
