window.getcomputedstyle()获取元素最终计算样式值，返回只读cssstyledeclaration对象，需用getpropertyvalue()取属性，数值带单位、颜色为rgb格式，元素须已挂载可见。
JavaScript 中通过 window.getComputedStyle() 获取元素的**最终计算样式值**（即浏览器渲染后实际生效的 CSS 值），而不是元素上直接写的内联样式或 CSS 规则中的原始声明。
基本用法：获取计算后的样式对象
getComputedStyle() 返回一个只读的 CSSStyleDeclaration 对象，包含所有已计算的 CSS 属性值（包括继承和层叠后确定的值）。
语法：
-
element：必需，目标 DOM 元素（如
document.getElementById('box')） -
pseudoElement：可选，字符串，如
':before'或':after'，用于获取伪元素样式
获取单个属性值：注意单位和返回格式
返回的对象不支持点语法直接访问（如 style.width），必须用 getPropertyValue() 或方括号语法：
const color = style['color']; // 也可用，但推荐 getPropertyValue
- 数值型属性（如
width、margin-top、font-size）返回带单位的字符串（如"120px"、"1.2em"） - 颜色类属性（如
color、background-color）默认返回rgb()或rgba()格式（如"rgb(34, 128, 200)"） - 未设置的属性可能返回默认值（如
display为"block"），不是空字符串或undefined
常见注意事项与陷阱
使用 getComputedStyle 时需留意以下关键点：
-
元素必须已挂载且可见：若元素未插入 DOM 或
display: none，部分浏览器可能返回不准确值（如宽高为"0px"）；visibility: hidden不影响计算结果 -
不反映动态修改的内联样式“实时”变化：它反映的是当前渲染状态，但调用前需确保样式已重排（一般 DOM 修改后浏览器会自动触发，无需手动
offsetHeight等强制重排，除非在极短时间内连续操作） -
无法获取简写属性的子值：例如
style.getPropertyValue('margin')可能返回空字符串，应改用'margin-top'、'margin-right'等具体长属性 -
伪元素必须存在且被 CSS 定义：若
:before的content为空或未定义，返回的样式对象可能无效或抛错
实用小技巧：转换与兼容处理
常需对返回值做进一步处理：
- 提取像素数值：
parseFloat(style.width)→ 得到120（自动忽略单位） - 判断是否隐藏：
style.display === 'none'或style.visibility === 'hidden' - 兼容旧版 IE：IE8 及更早不支持
getComputedStyle，可用element.currentStyle回退（仅限 IE）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
