JavaScript 中获取 DOM 元素的计算后样式须用 window.getComputedStyle()，它返回只读 CSSStyleDeclaration 对象，含所有生效属性值（如 px、rgb），支持伪元素，但需确保元素已挂载且在渲染流中。
JavaScript 中获取 DOM 元素的计算后样式（即浏览器最终渲染时应用的实际样式），要用 window.getComputedStyle() 方法，不能直接读取 element.style——因为后者只反映内联样式或脚本设置的样式，不包含 CSS 文件、继承、层叠或浏览器默认值。
使用 getComputedStyle 获取实时计算样式
getComputedStyle() 返回一个只读的 CSSStyleDeclaration 对象，包含该元素所有生效的 CSS 属性值（已解析为绝对单位，如 px、rgb() 等）。
- 基本用法：
const style = window.getComputedStyle(element); - 获取单个属性：
style.width或style.getPropertyValue('width') - 支持伪元素：第二个参数可传伪类名，如
getComputedStyle(el, '::before') - 注意：返回值是字符串，数值型属性（如
opacity）也要按字符串处理，必要时用parseFloat()
常见陷阱与注意事项
计算样式依赖元素已挂载且处于渲染流中。以下情况会出问题：
- 元素未插入 DOM 或
display: none：仍能获取样式，但部分几何属性（如offsetWidth、height）可能为0或auto - 元素在
<head>或文档片段中未挂载：调用会报错或返回空对象，需确保元素已在 body 下 - 某些属性（如
transform）返回矩阵字符串，需解析；background-color总是返回rgb()或rgba()格式 - 不要用
element.currentStyle（IE 专属，已废弃）
配合 offset/scroll/client 系列属性更实用
仅靠 getComputedStyle 有时不够——比如想知元素真实尺寸或位置，还需结合原生布局属性：
立即学习“Java免费学习笔记（深入）”；
-
element.offsetWidth/offsetHeight：含 padding + border + scrollbar（不含 margin） -
element.clientWidth/clientHeight：含 padding，不含 border/scollbar/margin -
element.getBoundingClientRect()：返回相对于视口的精确坐标和尺寸对象，含小数，响应式场景推荐 - 若需监听样式变化，可用
MutationObserver观察 class 切换，或用ResizeObserver监听尺寸变化
简单示例：获取并验证字体大小
比如检查某元素是否被 CSS 设置了 16px 字号：
const el = document.querySelector('#myDiv');
const computed = window.getComputedStyle(el);
console.log(computed.fontSize); // "16px"
console.log(parseFloat(computed.fontSize)); // 16
console.log(computed.fontFamily); // '"Helvetica", sans-serif'
如果元素有 font-size: 1rem 且根元素是 16px，这里也会返回 "16px" ——说明它已完成计算。
