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 |
