window方法:getDefaultComputedStyle()

2018-08-20 11:33 更新

getDefaultComputedStyle()方法

注意:此功能是非标准的,不要在面向Web的生产站点上使用它,它不适用于每个用户。实现之间可能存在很大的不兼容性,并且行为可能在将来发生变化。

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

句法

var style = window.getDefaultComputedStyle(element [,pseudoElt ]);
element
要获取其计算样式的Element
pseudoElt (可选)
指定要匹配的伪元素的字符串。对于常规元素,必须为null (或未指定)。

返回的style是一个CSSStyleDeclaration对象。

getDefaultComputedStyle()方法示例

var elem1 = document.getElementById("elemId");
var style = window.getDefaultComputedStyle(elem1);
<style>
#elem-container {
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

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

<script>
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getDefaultComputedStyle(elem).position;
    document.getElementById("output").innerHTML = theCSSprop; // will output "static"
</script>

描述

返回的对象与通过getComputedStyle返回的对象的类型相同,但仅考虑用户代理和用户规则。

与伪元素一起使用

getDefaultComputedStyle可以从伪元素中提取样式信息(例如::after,::before)。

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

<h3>generated content</h3> 

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

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

笔记

在某些已知的情况下,返回的值明显不准确。特别地,为了避免所谓的CSS历史泄漏安全性问题,浏览器可以明确地“谎报”关于链接的使用值,并且始终返回值,就像用户从未访问过链接的站点一样,或限制可以使用:visited伪选择器应用的样式。请参阅http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/和http://hacks.mozilla.org/2010/03/privacy-related-changes-即将到来的css-vistited /有关如何实现这些示例的详细信息。

规范

建议CSS工作组。

浏览器兼容性

新的兼容性表格处于测试阶段

电脑端 移动端
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview Chrome for Android
Edge Mobile Firefox for Android
Opera for Android
iOS Safari
基本支持
非标准
不支持 不支持
支持:19 不支持 不支持
不支持
不支持
不支持
不支持
支持:19 不支持 不支持
伪元素支持
非标准
不支持
不支持
支持:19 不支持
不支持
不支持
不支持
不支持
不支持
支持:19 不支持 不支持 
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号