Window getComputedStyle() 方法

定义和用法

getComputedStyle() 方法获取 HTML 元素的计算 CSS 属性和值。

getComputedStyle() 方法返回 CSSStyleDeclaration 对象。

计算样式

计算样式指的是在应用了所有样式来源之后在元素上使用的样式。

样式来源：外部和内部样式表、继承的样式和浏览器默认样式。

另请参阅：

CSSStyleDeclaration 对象

实例

例子 1

获取元素的计算背景色：

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);

let bgColor = cssObj.getPropertyValue("background-color");

亲自试一试

例子 2

从元素中获取所有计算样式：

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);

let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x)
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

亲自试一试

例子 3

获取元素中第一个字母的计算字体大小（使用伪元素）：

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")

let size = cssObj.getPropertyValue("font-size");

亲自试一试

语法

window.getComputedStyle(element, pseudoElement)

参数

参数 描述
element 必需。要为其获取计算样式的元素。
pseudoElement 可选。要获取的伪元素。

返回值

类型 描述
对象 拥有元素的所有 CSS 属性和值的 CSSStyleDeclaration 对象。

getComputedStyle() 方法与 style 属性的区别

把 getComputedStyle() 方法与 HTMLElement 的 style 属性进行对比：后者只允许访问元素的行内样式，用你所指定的任何单位都可以，并且，无法告诉你应用到元素样式表样式的任何信息。

浏览器支持

所有浏览器都支持 getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持