getComputedStyle 返回浏览器计算后的最终样式值，需元素已挂载且可见；支持伪元素，属性名用驼峰或短横线格式，返回字符串，涵盖CSS规则、内联样式及UA默认样式。
要用 getComputedStyle 获取 DOM 元素在 CSS 文件中定义、最终实际生效的样式，关键在于：它返回的是**浏览器计算后的最终值**（如 px、rgb()），不是原始 CSS 声明；且必须在元素已挂载到文档中、样式已应用后调用。
确保元素已渲染并插入文档流
getComputedStyle 只对**已挂载且可见**的元素有效。如果元素刚创建但还没添加到 document（比如只用 document.createElement 创建但没 appendChild），或被设为 display: none / visibility: hidden，仍能获取计算样式，但部分布局相关属性（如 width、height）可能返回 0px 或默认值。
- ✅ 正确做法：先插入 DOM，再调用
- ❌ 错误示例：
const el = document.createElement('div'); getComputedStyle(el).color;—— 此时el不在文档中，返回空样式对象或不准确值 - ? 小技巧：可用
el.offsetParent !== null或el.getClientRects().length > 0判断是否已渲染
调用 getComputedStyle 获取具体属性值
语法简单：getComputedStyle(element, pseudoElement)。第二个参数可选，用于获取伪元素（如 ::before）样式。
- 获取单个属性：
getComputedStyle(el).fontSize或getComputedStyle(el).getPropertyValue('font-size') - 注意属性名写法：JS 中用驼峰（
backgroundColor），CSS 中用短横线（background-color）；getPropertyValue必须传短横线格式字符串 - 返回值总是字符串（即使数值型），如
"16px"、"rgb(255, 0, 0)"、"bold"
理解“最终生效样式”的来源优先级
getComputedStyle 返回的是浏览器综合所有样式来源后的真实结果，包括：
立即学习“Java免费学习笔记（深入）”；
- CSS 文件中的规则（含层叠、继承、媒体查询匹配结果）
- 内联样式（
style="..."） - 浏览器默认样式（user agent stylesheet）
- !important 声明（只要它赢了层叠）
- 响应式断点触发后的样式（如
@media (max-width: 768px)已生效）
⚠️ 它不包含未生效的 CSS（如未匹配的媒体查询、无效选择器）、CSS 自定义属性（--my-color）本身（但会返回其计算后的值），也不反映 JS 动态修改 style 属性前的状态。
常见坑与应对建议
实际使用时容易忽略这些细节：
-
字体单位转换：
em、rem会被转为px，但依赖父元素或根元素字号；若需原始单位，得自己解析原始 CSS（需配合document.styleSheets） -
颜色格式统一：无论 CSS 写
#f00、red还是hsl(0,100%,50%)，getComputedStyle都返回rgb(r, g, b)或rgba(...) -
动态样式需等待重排完成：JS 修改
className或style后，立即调用getComputedStyle可能拿到旧值；可加el.offsetHeight强制触发重排，或用requestAnimationFrame延迟读取
