window方法:getDefaultComputedStyle()

2018-08-20 11:33 更新

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

瀏覽器兼容性

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

電腦端 移動端
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 不支持 不支持 
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號