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 支持 支持 支持 支持