Window: getComputedStyle() 方法

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

Window.getComputedStyle() 方法返回一个实时的只读 CSSStyleProperties 对象，其中包含元素所有 CSS 属性的已解析值，这些值是在应用活动样式表并解析其中可能包含的任何计算之后得出的。

语法

getComputedStyle(element)
getComputedStyle(element, pseudoElt)

参数

element: 要获取计算样式的 Element。
pseudoElt 可选: 一个字符串，指定要匹配的伪元素。对于实际元素则省略（或为 null）。

返回值

一个实时 CSSStyleProperties 对象，当元素样式改变时会自动更新。

注意：规范的早期版本返回的是 CSSStyleDeclaration（CSSStyleProperties 派生自它）。有关浏览器支持信息，请参见浏览器兼容性表。

警告：返回的值有时是故意不准确的。为避免“CSS 历史泄露”安全问题，浏览器可能会谎报已访问链接的计算样式，返回的值就好像用户从未访问过该链接的 URL 一样。请参阅弥补 CSS 历史泄露和CSS :visited 即将推出的隐私相关更改，了解此实现的示例。

异常

TypeError: 如果传入的对象不是 Element，或者 pseudoElt 不是有效的伪元素选择器，或者为 ::part() 或 ::slotted()。

注意：“有效的伪元素选择器”指语法上的有效性，例如 ::unsupported 被认为是有效的，即使伪元素本身不受支持。

描述

该方法返回一个实时的只读 CSSStyleProperties 对象，其中包含元素所有 CSS 属性的已解析值，这些值是在应用活动样式表并解析其中可能包含的任何计算之后得出的。

返回的对象可用于检查元素的样式——包括那些内联设置的、使用 <style> 元素设置的，或通过外部样式表设置的样式。由于该对象是只读的，因此您无法使用它来设置元素的样式。但是，由于它是“实时”的，如果您使用另一个 API（例如 HTMLElement.style）更新元素样式，返回的对象将使用相应的已解析值进行更新。

该对象包含已解析值的区别很重要。对于大多数属性，特别是那些依赖于布局的属性，例如 display、font-size 或 line-height，已解析值就是计算值。对于依赖于布局的属性，使用值可能与计算值略有不同，这就是作为已解析值返回的值。对于动画属性值，它将是动画当前点的计算值。

返回的对象包含浏览器支持的所有 CSS 属性的以短横线命名和相应的驼峰命名属性，包括简写属性和长写属性。

元素的简写 CSS 属性会扩展为相应的长格式属性。例如，样式为 "border-top: 1px solid black" 的元素将在返回的对象中表示为名为 border-top 和 borderTop 的属性，以及相应的长写属性 border-top-color 和 borderTopColor、border-top-style 和 borderTopStyle、以及 border-top-width 和 borderTopWidth。

请注意，返回的对象与元素 style 属性返回的对象类型相同。但是，element.style 对象也可以用于设置该元素的样式，并且只返回内联样式或通过 JavaScript 设置的样式。

HTML

html

<p>Hello</p>

CSS

css

p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  font: 2rem/2 sans-serif;
  text-align: center;
  background: purple;
  color: white;
}

JavaScript

const para = document.querySelector("p");
const compStyles = window.getComputedStyle(para);
para.textContent =
  `My computed font-size is ${compStyles.getPropertyValue("font-size")},\n` +
  `and my computed line-height is ${compStyles.getPropertyValue(
    "line-height",
  )}.`;

结果

与伪元素一起使用

getComputedStyle() 可以从伪元素中提取样式信息，例如 ::after、::before、::marker 或 ::line-marker。

html

<h3>Generated content</h3>

css

h3::after {
  content: " rocks!";
}

const h3 = document.querySelector("h3");
const result = getComputedStyle(h3, "::after").content;

console.log("the generated content is: ", result); // returns ' rocks!'