getComputedStyle()获取 DOM 元素最终计算样式，返回只读 CSSStyleDeclaration 对象；需传入已挂载的 Element，支持驼峰 / 短横线属性名，可查伪元素，返回值为解析后的绝对像素值。
JavaScript 中用 getComputedStyle() 可以获取元素最终应用的 CSS 样式（包括浏览器默认样式、CSS 文件、内联样式、媒体查询生效样式等），返回一个只读的 CSSStyleDeclaration 对象。
基本用法：获取计算后的真实样式
该方法必须传入一个已挂载到 DOM 中的元素节点，否则会报错。它不接受选择器字符串，只接受 Element 对象：
const el = document.querySelector('#box');const style = getComputedStyle(el);console.log(style.width); // 如 "200px"console.log(style.color); // 如 "rgb(34, 34, 34)"
获取特定属性：支持驼峰和短横线写法
属性名可使用驼峰式（如fontSize）或短横线小写形式（如'font-size'），两者都有效：
style.fontSize === style['font-size'] // true- 推荐用驼峰写法，更符合 JS 习惯，且支持自动补全
- 注意：某些属性如
float在 JS 中是保留字，需用cssFloat（或'float'字符串）
伪元素样式：第二个参数指定伪类
想获取 ::before、::after 等伪元素的样式，需传入第二个参数：
立即学习“Java 免费学习笔记（深入）”；
getComputedStyle(el, '::before')getComputedStyle(el, ':hover') // 注意单冒号，仅用于测试，实际：hover 不可直接取- 伪元素必须在 CSS 中真实定义（如
content: ""），否则返回空样式对象
注意点：返回值是实时但不可写，且单位固定
getComputedStyle返回的是计算后的绝对值，不含相对单位或变量：
- 百分比宽度会转为具体像素值（如
"300px"） -
rem/em全部解析为像素 - 返回值是只读对象，修改
style.xxx无效 - 若元素未渲染（
display: none或未插入 DOM），部分浏览器可能返回不准确值，建议确保元素已布局
不复杂但容易忽略：它反映的是浏览器实际绘制时的样子，不是源码写的样式。
