JavaScript 获取页面元素计算样式主要用 window.getComputedStyle() 方法，返回只读 CSSStyleDeclaration 对象，反映浏览器渲染后的实际值，支持伪元素和 getPropertyValue() 等高效取值方式。
使用 JavaScript 获取页面元素的计算样式，主要依靠 window.getComputedStyle() 方法。它返回一个包含所有最终计算样式的 CSSStyleDeclaration 对象，反映浏览器实际渲染时应用的值（如将 em 转为像素、继承父级颜色等）。
获取元素的全部计算样式
调用 getComputedStyle() 时需传入目标 DOM 元素，可选第二个参数指定伪元素（如 ::before）：
- 第一个参数必须是已挂载到文档中的元素（不能是刚创建未 append 的节点）
- 返回对象是只读的，修改它不会影响真实样式
- 属性名使用驼峰写法（如
backgroundColor），也可用字符串索引（style['background-color']）
示例：
const el = document.querySelector('#myDiv');
const style = window.getComputedStyle(el);
console.log(style.fontSize); // "16px"
console.log(style.backgroundColor); // "rgb(255, 0, 0)"
console.log(style.getPropertyValue('border-top-width')); // "2px"
获取单个计算样式属性值
避免遍历整个样式对象，直接读取特定属性更高效：
立即学习“Java免费学习笔记（深入）”；
- 推荐用
getPropertyValue('property-name')，支持短横线命名，语义清晰 - 也可用点语法（如
style.width），但注意部分属性名需驼峰化（zIndex、fontSize） - 对复合属性（如
margin），返回的是最终计算出的单值（margin本身不返回，但marginTop可以）
注意：display、visibility 等属性返回的是计算后的真实值，即使由 CSS 继承或层叠决定。
处理伪元素的计算样式
若需获取 ::before 或 ::after 的样式，把伪元素名称作为第二个参数传入：
const el = document.querySelector('.card');
const beforeStyle = window.getComputedStyle(el, '::before');
console.log(beforeStyle.content); // '"arrow"'（含引号）
- 伪元素必须在 CSS 中已定义
content属性，否则返回空字符串或none - 无法获取未渲染的伪元素（例如
content: none或未匹配的选择器）
注意事项与常见问题
使用 getComputedStyle 时容易忽略的关键点：
- 元素必须在文档流中且已布局（
display: none的元素仍可获取，但visibility: hidden不影响计算） - 返回的数值均为绝对单位（如
px、rgb()、deg），不保留原始 CSS 写法（如rem、hsl会被转换） - 无法获取内联样式优先级或 CSS 规则来源，仅反映最终结果
- 服务端渲染（SSR）环境无
window，该方法不可用
