Window getComputedStyle()
示例
获取元素的计算背景颜色
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
尝试一下 »
更多示例请看下面。
描述
The getComputedStyle() 方法获取 HTML 元素的计算 CSS 属性和值。
The getComputedStyle() 方法返回一个 CSSStyleDeclaration 对象。
计算样式
计算样式是在应用所有样式源后在元素上使用的样式。
样式源：外部和内部样式表、继承样式和浏览器默认样式。
另请参阅
语法
window.getComputedStyle(element, pseudoElement)
参数
| 参数 | 描述 |
| element | 必需的。 要获取计算样式的元素。 |
| pseudoElement | 可选的。 要获取的伪元素。 |
返回值
| 类型 | 描述 |
| 一个对象 | 包含元素所有 CSS 属性和值的 CSSStyleDeclaration 对象。 |
更多示例
获取元素的所有计算样式
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 |
