Window getComputedStyle()
示例
獲取元素的計算背景顏色
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
自己動手試一試 »
更多示例見下文。
描述
getComputedStyle() 方法獲取 HTML 元素的計算 CSS 屬性和值。
getComputedStyle() 方法返回一個 CSSStyleDeclaration 物件。
計算樣式
計算樣式是在應用所有樣式源之後，元素上使用的樣式。
樣式源：外部和內部樣式表、繼承樣式和瀏覽器預設樣式。
另請參閱
語法
window.getComputedStyle(元素, 偽元素)
引數
| 引數 | 描述 |
| 元素 | 必需。 要獲取計算樣式的元素。 |
| pseudoElement | 可選。 要獲取的偽元素。 |
返回值
| 型別 | 描述 |
| 一個物件 | 一個 CSSStyleDeclaration 物件，包含元素的所有 CSS 屬性和值。 |
更多示例
獲取元素的所有計算樣式
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>";
}
自己動手試一試 »
獲取元素中第一個字母的計算字型大小（使用偽元素）
const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
自己動手試一試 »
瀏覽器支援
所有瀏覽器都支援 getComputedStyle()
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
