码农教程 - 一技在手,衣食无忧! tools

目录

window getCompatedStyle()

❮上一节 ❮ 窗口对象参考 下一节❯

示例

获取元素的计算背景颜色：

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);

let bgColor = cssObj.getPropertyValue("background-color");
亲自试一试 »

下面有更多示例。

描述

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

这个getComputedStyle()方法返回一个 CSSStyleDeclaration object。

计算样式

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

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

也可以看看：

CSSStyleDeclaration 对象.

语法

window.getComputedStyle( element, pseudoElement)

参数

Parameter Description
element Required.
The element to get the computed style for.
pseudoElement Optional.
A pseudo-element to get.

返回值

类型 描述
一个东西 包含元素的所有 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
Yes Yes Yes Yes Yes 9-11


❮上一节 ❮ 窗口对象参考 下一节❯