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），部分浏览器可能返回不准确值，建议确保元素已布局
不复杂但容易忽略：它反映的是浏览器实际绘制时的样子，不是源码写的样式。
