Window getComputedStyle() 方法

语法

window.getComputedStyle(element[, pseudoElt]);

• element: 要获取样式的元素。
• pseudoElt (可选): 一个字符串，用于指定要匹配的伪元素。默认值为 null。

返回值

getComputedStyle() 方法返回一个 CSSStyleDeclaration 对象，其中包含指定元素的所有计算样式。

示例

假设我们有一个 <div> 元素，样式如下：

<div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>

我们可以使用 getComputedStyle() 方法来获取该元素的样式：

var myDiv = document.getElementById('myDiv');
var styles = window.getComputedStyle(myDiv);

console.log(styles.width); // "100px"
console.log(styles.height); // "100px"
console.log(styles.backgroundColor); // "rgb(255, 0, 0)"

注意事项

• getComputedStyle() 方法返回的是只读的 CSSStyleDeclaration 对象，我们可以通过该对象来获取样式属性的值，但无法直接修改元素的样式。
• 如果要修改元素的样式，应该使用 element.style 对象。

兼容性

getComputedStyle() 方法在各大现代浏览器中都有很好的兼容性，包括 Chrome、Firefox、Safari 和 Edge 等主流浏览器。但是在 IE8 及以下版本中不支持该方法。

总结

通过 window.getComputedStyle() 方法，我们可以方便地获取到指定元素的最终计算样式，为前端开发中的样式操作提供了很大的便利性。希望本文对你有所帮助！