Window: getDefaultComputedStyle() 方法

非标准：此功能是非标准的，并且不在标准化轨道上。请勿在面向网络的生产站点上使用它：它不会对每个用户都有效。实现之间也可能存在很大的不兼容性，并且行为在将来可能会发生变化。

getDefaultComputedStyle() 方法提供元素所有 CSS 属性的默认计算值，忽略作者样式。也就是说，只考虑用户代理和用户样式。

语法

js
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)

参数

element

要获取其计算样式的Element。

pseudoElt 可选

指定要匹配的伪元素的字符串。对于普通元素，必须为 null（或未指定）。

返回值

返回的 style 是 CSSStyleDeclaration 对象。该对象与 Window.getComputedStyle() 返回的对象类型相同，但只考虑用户代理和用户规则。

示例

简单示例

js
const elem1 = document.getElementById("elemId");
const style = window.getDefaultComputedStyle(elem1);

更长的示例

html
<style>
  #elem-container {
    position: absolute;
    left: 100px;
    top: 200px;
    height: 100px;
  }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>

<script>
  const elem = document.getElementById("elem-container");
  const theCSSprop = window.getDefaultComputedStyle(elem).position;
  document.getElementById("output").textContent = theCSSprop; // Will output "static"
</script>

与伪元素一起使用

getDefaultComputedStyle() 方法可以从伪元素（例如，::before 或 ::after）中提取样式信息。

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

<h3>generated content</h3>

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

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

注意事项

在某些已知情况下，返回的值是故意错误的。特别是，为了避免所谓的 CSS 历史泄漏安全问题，浏览器可能会明确地“撒谎”关于链接的已使用值，并且始终返回值，就好像用户从未访问过链接站点一样，或者限制可以使用 :visited 伪选择器应用的样式。有关如何实现此示例的详细信息，请参阅 https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ 和 https://hacks.mozilla.ac.cn/2010/03/privacy-related-changes-coming-to-css-vistited/。

规范

向 CSS 工作组提出。

浏览器兼容性

BCD 表只在浏览器中加载