应使用 getcomputedstyle() 获取元素计算后的最终样式值，它返回包含所有计算后css属性的只读对象，属性名驼峰命名，值带单位字符串，需 parsefloat() 提取数值，兼容ie9+但不可用于未渲染元素的几何属性。
要获取元素计算后的最终样式值（即浏览器实际应用的样式，包含 CSS 继承、层叠、媒体查询生效后的结果），不能用 element.style.xxx（它只读取行内样式），而应使用 getComputedStyle() 方法。
使用 getComputedStyle 获取最终样式
window.getComputedStyle(element, pseudoElement) 返回一个只读的 CSSStyleDeclaration 对象，包含该元素所有**计算后**的 CSS 属性值（如 width、color、marginBottom 等）。
- 第一个参数是目标 DOM 元素（必需）
- 第二个参数可选，用于获取伪元素样式（如
::before或::after），传null或省略表示主元素本身 - 返回值中的属性名使用驼峰命名（如
backgroundColor），对应 CSS 中的background-color
示例：
const box = document.getElementById('myBox');
const style = window.getComputedStyle(box);
console.log(style.width); // "200px"
console.log(style.backgroundColor); // "rgb(255, 0, 0)"
console.log(style.fontSize); // "16px"
注意单位与数值转换
getComputedStyle 返回的值**总是带单位的字符串**（如 "16px"、"rgb(255, 0, 0)"、"normal"）。若需数值运算：
- 用
parseFloat()提取数字部分（适用于px、em等长度值） - 对颜色等复杂值，可用
getComputedStyle配合window.matchMedia或canvas进一步解析（一般场景直接用字符串即可）
区分 computed style 和 resolved style
在大多数现代浏览器中，getComputedStyle 返回的是「resolved style」：已计算为绝对值（如 em 转为 px）、已处理继承、已应用 CSS 逻辑（如 display: none 元素的宽高为 "0px"）。但注意：
- 未渲染的元素（如
display: none或不在文档流中）仍可获取计算样式，但某些属性（如offsetWidth）会返回0 -
getComputedStyle不反映布局后的位置尺寸（如offsetTop、clientHeight属于几何属性，需单独获取）
兼容性与常见陷阱
- IE8 及更早版本不支持，IE9+、Edge、Chrome、Firefox、Safari 均支持
- 不要依赖
element.currentStyle（IE 专有，已废弃） - 避免频繁调用（尤其在循环或动画中），可缓存结果或结合
ResizeObserver/IntersectionObserver按需更新 - 动态修改样式后，
getComputedStyle会立即反映新值（DOM 更新是同步的，重排重绘是异步的，但计算样式基于最新 DOM 状态）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
