getComputedStyle 返回元素实际渲染的计算值而非原始声明值，如 "1.5em" 转为 "24px"、"50%" 转为 "200px"；支持伪元素，返回只读 CSSStyleDeclaration 对象，但不提供原始 CSS、自定义属性（需 getPropertyValue）、未应用样式细节或动画参数。
getComputedStyle 是获取元素在页面上**实际渲染时的 CSS 属性值**的标准方法，它返回的是经过浏览器 CSS 引擎计算、级联、继承、媒体查询匹配后的最终值（即“解析后样式”），但注意：它返回的是**计算值（computed values）**，不一定是你写在 CSS 中的原始声明值（如 em、rem、% 会被转为像素；inherit、unset 会被解析为具体值）。
理解 getComputedStyle 返回的是“计算值”，不是“声明值”
例如：
- 若某元素设置了
font-size: 1.5em，而父元素是16px，getComputedStyle(el).fontSize返回"24px"，不是"1.5em"； - 若设置了
width: 50%，且父容器宽 400px，则返回"200px"； - 若设置了
color: currentColor或border-color: inherit，它会给出最终解析出的实际颜色值（如"rgb(33, 33, 33)"）。
基本用法：获取单个或多个属性
语法简单：
const style = getComputedStyle(element[, pseudoElement]);
-
element必须是已挂载到 DOM 的元素（否则返回空样式对象）； -
pseudoElement可选，如":before"、":after"、":first-line"等； - 返回一个只读的
CSSStyleDeclaration对象，属性名使用驼峰命名（如backgroundColor对应 CSS 中的background-color）。
示例：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('#my-box');<br>const cs = getComputedStyle(el);<br>console.log(cs.width); // "200px"<br>console.log(cs.fontSize); // "16px"<br>console.log(cs.getPropertyValue('margin-left')); // "10px"
注意“原始渲染属性”的边界：哪些值它给不了？
getComputedStyle 不提供以下信息：
- 原始 CSS 声明（比如你写的是
height: auto，它可能返回"124.5px"，但无法知道你当初没写具体数值）； - 自定义属性（
--my-color）——需用getPropertyValue('--my-color')显式读取，它不会被自动计算或继承（除非你在其他属性中var(--my-color)使用了它）； - 未应用的样式（如 display: none 的元素仍可读取，但某些布局相关属性如
offsetHeight为 0，而getComputedStyle仍返回逻辑值）； - 动画中的瞬时值（它返回当前帧的计算值，但不暴露动画时间、缓动函数等）。
实用技巧：安全读取 + 处理单位与兼容性
建议写法：
- 总是先检查元素是否存在且已连接：
if (el.isConnected) { ... }； - 用
getPropertyValue()读取带连字符的属性更可靠（避免驼峰转换歧义）； - 对数值型属性，可用
parseFloat()提取无单位数字：parseFloat(cs.width)→200； - IE8 不支持，IE9+ 支持；现代浏览器均支持，包括所有移动端。
小提醒：如果需要“还原原始声明”（比如做样式编辑器），不能只靠 getComputedStyle，得结合 document.styleSheets、element.getAttribute('style') 和 CSSOM 手动追踪来源。
