Window: getComputedStyle() 方法

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

各个 CSS 属性值通过对象提供的 API 或通过使用 CSS 属性名称进行索引来访问。

语法

js
getComputedStyle(element)
getComputedStyle(element, pseudoElt)

参数

element

要获取计算样式的 Element。

pseudoElt 可选

一个字符串，指定要匹配的伪元素。对于实际元素，省略（或为 null）。

返回值

一个实时 CSSStyleDeclaration 对象，当元素的样式发生改变时，该对象会自动更新。

异常

TypeError

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

注意： 有效的伪元素选择器指的是语法有效性，例如 ::unsupported 被认为是有效的，即使伪元素本身不受支持。此外，最新的 W3 标准 明确支持 仅 ::before 和 ::after，而 CSS WG 草案 没有限制此值。浏览器兼容性可能会有所不同。

示例

在这个例子中，我们对一个 <p> 元素进行样式设置，然后使用 getComputedStyle() 检索这些样式，并将它们打印到 <p> 的文本内容中。

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

js
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",
  )}.`;

结果

描述

返回的对象与从元素的 style 属性返回的对象是相同的 CSSStyleDeclaration 类型。但是，这两个对象的目的不同。

  • 来自 getComputedStyle 的对象是只读的，应该用于检查元素的样式，包括由 <style> 元素或外部样式表设置的样式。
  • element.style 对象应该用于设置该元素的样式，或者检查直接添加到该元素的样式，这些样式来自 JavaScript 操作或全局 style 属性。

第一个参数必须是 Element。非元素，例如 Text 节点，将抛出错误。

defaultView

在许多代码示例中，getComputedStyle 是从 document.defaultView 对象中使用的。在几乎所有情况下，这是不必要的，因为 getComputedStyle 也存在于 window 对象中。defaultView 模式很可能是由于人们不想为 window 编写测试规范，并希望创建一个在 Java 中也能使用的 API。

与伪元素一起使用

getComputedStyle 可以从伪元素（例如 ::after、::before、::marker、::line-marker - 请参见 伪元素规范）中提取样式信息。

html
<style>
  h3::after {
    content: " rocks!";
  }
</style>

<h3>Generated content</h3>

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

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

注意事项

  • 返回的 CSSStyleDeclaration 对象包含 CSS 属性长格式名称和短格式名称的活动值。例如，返回的对象包含 border-bottom-width 的条目，以及 border-width 和 border 短格式属性名称 的条目。可以使用长格式名称（例如 font-size）以及短格式名称（例如 font）查询值。
  • 可以使用 getPropertyValue(propName) 方法或通过使用数组或 点符号（例如 obj['z-index'] 或 obj.zIndex）直接对对象进行索引来访问 CSS 属性值。
  • getComputedStyle 返回的值是 解析后的值。这些值通常与 CSS 2.1 的 计算后的值 相同，但对于一些较旧的属性（例如 width、height 或 padding），它们与 使用后的值 相同。最初，CSS 2.0 将计算后的值定义为属性在级联和继承之后“准备使用”的最终值，但 CSS 2.1 将其重新定义为布局前值，并将使用后的值定义为布局后值。对于 CSS 2.0 属性，getComputedStyle 返回计算后的值的旧含义，现在称为使用后的值。布局前值和布局后值之间的差异示例包括百分比的解析，例如 width 或 height，因为这些百分比值只有在使用后的值中才会被其像素等效值替换。
  • 返回的值有时会故意不准确。为了避免“CSS 历史泄漏”安全问题，浏览器可能会对已访问链接的计算样式撒谎，并返回的值就好像用户从未访问过链接的 URL 一样。请参见 阻止 CSS 历史泄漏 和 对 CSS :visited 的隐私相关更改，了解如何实现此功能的示例。
  • 在 CSS 过渡 期间，getComputedStyle 在 Firefox 中返回原始属性值，但在 WebKit 中返回最终属性值。
  • 在 Firefox 中，值为 auto 的属性返回使用后的值，而不是 auto 值。因此，如果您在高度为 30px 且包含块高度为 100px 的元素上应用 top:auto 和 bottom:0，则 Firefox 的 top 计算样式将返回 70px，因为 100 − 30 = 70。

规范

规范
CSS 对象模型 (CSSOM)
# dom-window-getcomputedstyle

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅