Window: getDefaultComputedStyle() 方法

非标准:此特性未标准化。我们不建议在生产环境中使用非标准特性,因为它们浏览器支持有限,并且可能会更改或被移除。但是,在没有标准选项的特定情况下,它们可以是合适的替代方案。

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

语法

js
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)

参数

element

用于获取计算样式的 Element

pseudoElt 可选

指定要匹配的伪元素的字符串。对于常规元素,必须为 null(或未指定)。

返回值

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

示例

简单示例

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

更长的示例

html
<div id="elem-container">dummy</div>
<div id="output"></div>
css
#elem-container {
  position: absolute;
  left: 100px;
  top: 200px;
  height: 100px;
}
js
const elem = document.getElementById("elem-container");
const theCSSprop = getDefaultComputedStyle(elem).position;
document.getElementById("output").textContent = theCSSprop; // outputs "static"

与伪元素一起使用

getDefaultComputedStyle() 方法可以从伪元素(例如 ::before::after)获取样式信息。

html
<h3>generated content</h3>
css
h3::after {
  content: " rocks!";
}
js
const h3 = document.querySelector("h3");
const result = getDefaultComputedStyle(h3, "::after").content;

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

注意

在某些已知情况下,返回的值可能是故意不准确的。特别是为了避免所谓的 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 工作组。

浏览器兼容性