window方法：getComputedStyle()

getComputedStyle()方法

該window.getComputedStyle()方法返回一個對象，該對象在應(yīng)用活動樣式表并解析這些值可能包含的任何基本計算后，報告元素的所有CSS屬性的值。單個CSS屬性值通過對象提供的API或通過使用CSS屬性名稱進(jìn)行索引來訪問。

getComputedStyle()方法語法

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

element

要獲取其計算風(fēng)格的Element。

pseudoElt（可選的）

指定要匹配的偽元素的字符串。必須省略（或null）常規(guī)元素。

注意：在Gecko 2.0（Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1）之前，需要參數(shù)pseudoElt。如果為null，則不需要指定此參數(shù)的其他主要瀏覽器。Gecko已被更改為與其他瀏覽器的行為相匹配。

返回的style是一個活動CSSStyleDeclaration對象，它在元素的樣式更改時自動更新。

getComputedStyle()方法示例

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// this is equivalent to:
// var style = document.defaultView.getComputedStyle(elem1, null);

<style>
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

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

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>

function dumpComputedStyles(elem,prop) {

  var cs = window.getComputedStyle(elem,null);
  if (prop) {
    console.log(prop+" : "+cs.getPropertyValue(prop));
    return;
  }
  var len = cs.length;
  for (var i=0;i<len;i++) {
 
    var style = cs[i];
    console.log(style+" : "+cs.getPropertyValue(style));
  }

}

說明

返回的對象與從元素style屬性返回的CSSStyleDeclaration對象的類型相同；但是，這兩個對象有不同的用途。從getComputedStyle返回的對象是只讀的，可用于檢查元素的樣式（包括由<style>元素或外部樣式表設(shè)置的樣式）。該elt.style對象應(yīng)該用于設(shè)置特定元素的樣式。

第一個參數(shù)必須是一個Element（傳遞非元素節(jié)點，如#text節(jié)點，將引發(fā)錯誤）。從Gecko 1.9.2（Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0）開始，返回的URL值現(xiàn)在在url周圍有引號，如下所示：url("http://foo.com/bar.jpg")。

defaultView

在線的許多代碼示例中，getComputedStyle都是從document.defaultView對象中使用的。幾乎在所有情況下，這都是不必要的，就像getComputedStyle在window對象上一樣。defaultView模式可能是：（1）不想為window編寫規(guī)范；（2）創(chuàng)建一個在Java中也可用的API的組合。然而，有一種情況必須使用defaultView的方法：當(dāng)使用Firefox 3.6來訪問鏡框樣式時。

與偽元素一起使用

getComputedStyle可以從偽元素中提取樣式信息（例如：::after, ::before, ::marker, ::line-marker）。

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

<h3>generated content</h3> 

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

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

筆記

返回的CSSStyleDeclaration對象將包含所有受支持的CSS屬性longhand名稱的活動值。示例longhand名稱是border-bottom-width，而border-width和border是示例shorthand屬性名稱。最安全的方法是只使用font-size之類的longhand名稱來查詢值。使用shorthand名稱查詢（例如font）將無法與大多數(shù)瀏覽器一起使用。

可以使用getPropertyValue(propName)API或通過直接索引到對象（例如，cs[' z-index']或cs.zIndex。）來訪問CSS屬性值

getComputedStyle返回的值稱為resolved values（已解析值）。這些通常與CSS 2.1 computed values（計算值）相同，但對于某些較舊的屬性：width、height或者padding，它們是used values。最初，CSS 2.0將計算值定義為級聯(lián)和繼承后屬性的“隨時可用”的最終值，但CSS 2.1將計算值重新定義為預(yù)布局，并將值用作后置布局。對于CSS 2.0屬性，該getComputedStyle函數(shù)返回計算值的舊含義，現(xiàn)在稱為已使用的值（used values）。預(yù)布局值和后布局值之間的差異示例包括表示元素寬度或高度的百分比（也稱為布局）的分辨率，因為只有在使用值的情況下，這些百分比才會被其等效像素所取代。

在某些已知的情況下，返回的值明顯不準(zhǔn)確。特別地，為了避免所謂的CSS歷史泄漏安全性問題，瀏覽器可以明確地“謊報”關(guān)于鏈接的使用值，并且始終返回值，就像用戶從未訪問過鏈接的站點一樣。有關(guān)如何實現(xiàn)此操作的示例的詳細(xì)信息，請參閱：http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/和http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/。大多數(shù)其他現(xiàn)代瀏覽器對偽選擇器樣式的應(yīng)用和getComputedStyle返回的值的應(yīng)用程序進(jìn)行了類似的更改。

在CSS轉(zhuǎn)換期間，getComputedStyle返回Firefox中的原始屬性值，但返回WebKit中的最終屬性值。

在Firefox中，具有該auto值的屬性將返回已使用的值，而不是值auto。所以，如果你在一個包含height:30px并且它的包含塊是height:100px;的元素中申請top:auto;和bottom:0;，則在請求top的計算樣式時，F(xiàn)irefox將返回top:70px，因為100px-30px=70px。

瀏覽器兼容性

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