JavaScript | 窗口 getComputedStyle() 方法

getComputedStyle() 是Javascript中一个用于获取计算后样式的方法，它能够获取元素的最终样式，包括通过CSS类、ID、内联样式或浏览器默认样式所应用的所有样式。使用此方法可以方便的获取当前页面渲染后的所有样式，也可以动态的设置元素的样式。

语法

window.getComputedStyle(element [, pseudoElement]);

• element：指定需要获取计算样式的元素。必选的。
• pseudoElement：伪元素。指定peudo元素获取计算样式的属性。可选参数。

参数

• element 参数是一个DOM节点对象，它也可以是文档树的任何一个元素节点。
• pseudoElement 参数是一个字符串，它表示伪元素名称，例如:before、:after、:first-line等。

返回值

返回值是一个 CSSStyleDeclaration 对象，它包含指定元素的所有计算样式，可以通过对象属性来访问他们。

代码示例

// 获取元素的计算样式
const element = document.getElementById('example');
const styles = window.getComputedStyle(element);
console.log(styles);

快速访问样式

// 快速访问样式
const element = document.getElementById('example');
const styles = window.getComputedStyle(element);
const color = styles.getPropertyValue('color');
console.log(color);

注意事项

• 该方法所返回的计算样式包括了文档树上所有关于样式的规则，包括用户自定义的规则和浏览器自动设置的规则。因此，返回的样式复杂而全面，但可能不太容易查询。
• 计算样式不包含有关布局和渲染的信息。
• getComputedStyle() 方法对节点只读，它无法修改实际的CSS样式声明。