window方法：getDefaultComputedStyle()

getDefaultComputedStyle()方法

注意：此功能是非標準的，不要在面向Web的生產(chǎn)站點上使用它，它不適用于每個用戶。實現(xiàn)之間可能存在很大的不兼容性，并且行為可能在將來發(fā)生變化。

getDefaultComputedStyle()方法提供元素的所有CSS屬性的默認計算值，忽略作者樣式。也就是說，僅考慮用戶代理和用戶樣式。

句法

var style = window.getDefaultComputedStyle（element [，pseudoElt ]）;

element

要獲取其計算樣式的Element。

pseudoElt （可選）

指定要匹配的偽元素的字符串。對于常規(guī)元素，必須為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返回的對象的類型相同，但僅考慮用戶代理和用戶規(guī)則。

與偽元素一起使用

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歷史泄漏安全性問題，瀏覽器可以明確地“謊報”關(guān)于鏈接的使用值，并且始終返回值，就像用戶從未訪問過鏈接的站點一樣，或限制可以使用:visited偽選擇器應(yīng)用的樣式。請參閱http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/和http://hacks.mozilla.org/2010/03/privacy-related-changes-即將到來的css-vistited /有關(guān)如何實現(xiàn)這些示例的詳細信息。

規(guī)范

建議CSS工作組。

瀏覽器兼容性

新的兼容性表格處于測試階段