Window getComputedStyle() Metodu

定义和用法

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

getComputedStyle() 方法返回 CSSStyleDeclaration 对象。

计算样式

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

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

另请参阅：

CSSStyleDeclaration nesnesi

实例

例子 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() yöntemi ile style özelliğinin farkı

getComputedStyle() yöntemini HTMLElement'in style özelliği ile karşılaştırın: bu, sadece元素的行内样式允许访问，你可以使用你指定的任何单位，并且，无法告诉你应用到元素样式表样式的任何信息。

Tarayıcı desteği

Tüm tarayıcılar destekler getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek 9-11 Destek Destek Destek Destek