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工作组。

浏览器兼容性

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