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 工作组。
浏览器兼容性
加载中…