window方法：getComputedStyle()

getComputedStyle()方法

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

getComputedStyle()方法語(yǔ)法

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

element

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

pseudoElt（可選的）

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

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

返回的style是一個(gè)活動(dòng)CSSStyleDeclaration對(duì)象，它在元素的樣式更改時(shí)自動(dòng)更新。

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));
  }

}

說(shuō)明

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

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

defaultView

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

與偽元素一起使用

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對(duì)象將包含所有受支持的CSS屬性longhand名稱的活動(dòng)值。示例longhand名稱是border-bottom-width，而border-width和border是示例shorthand屬性名稱。最安全的方法是只使用font-size之類的longhand名稱來(lái)查詢值。使用shorthand名稱查詢（例如font）將無(wú)法與大多數(shù)瀏覽器一起使用。

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

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

在某些已知的情況下，返回的值明顯不準(zhǔn)確。特別地，為了避免所謂的CSS歷史泄漏安全性問(wèn)題，瀏覽器可以明確地“謊報(bào)”關(guān)于鏈接的使用值，并且始終返回值，就像用戶從未訪問(wèn)過(guò)鏈接的站點(diǎn)一樣。有關(guān)如何實(shí)現(xiàn)此操作的示例的詳細(xì)信息，請(qǐng)參閱：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)代瀏覽器對(duì)偽選擇器樣式的應(yīng)用和getComputedStyle返回的值的應(yīng)用程序進(jìn)行了類似的更改。

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

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

瀏覽器兼容性

新的兼容性表格處于測(cè)試階段