Window.getComputedStyle（）の結果は常に最新の状態になっていますか？

Question

Window.getComputedStyle()は、要素の解決されたスタイルプロパティを持つCSSStyleDeclarationオブジェクトを返します。

ページが変更されると、このオブジェクトは最新の状態に保たれますか？たとえば、これは動作することが保証されていますか？

var style = window.getComputedStyle(myDiv); 
assert(myDiv.display == 'block'); 
myDiv.style.display = 'none'; 
assert(myDiv.style.display == 'none'); // Magically updated 

私はgetComputedStyle()を呼び出すことによって返されたオブジェクトが一致していないことに気付きました。私はあなたがgetComputedStyle()の結果をキャッシュすることができないと仮定しました。それは読み取り専用なのでです。アクセスするプロパティは常に最新の解決値を返しますか？

var style1 = window.getComputedStyle(myDiv); 
myDiv.style.display = 'none'; 
var style2 = window.getComputedStyle(myDiv); 
assert(style1 != style2); // Not the same object 
for (var i = 0; i < style1.length; i++) 
    assert(style1[i] == style2[i]); 

Answer 1

がCSS Object Modelによると、getComputedStyleが

効果的

partial interface Window { 
    [NewObject] CSSStyleDeclaration getComputedStyle (
    Elementelt, 
    optional DOMString? pseudoElt 
); 
};

として定義され、あなたはそれを呼び出すたびに、異なるオブジェクトを取得します。それは理由[NewObject]のだ：

regularまたはstaticoperation上[NewObject]extended attribute表示された場合、それは 操作を呼び出すときに、新しく作成されたオブジェクトへの参照が 常に返さなければならないことを示しています。

しかし、返された宣言は生きている必要があります。

戻り、次のプロパティを持つライブCSS宣言ブロック：

• readonly flag：設定してください。
• declarations：値がDOCに関連付けられたスタイル規則を使用して、OBJに対して計算resolved valueされた状態で、辞書式順序で、supported CSS propertiesあるすべて手書き特性。
• parent CSS rule：Null。
• owner node：obj。

仕様は明示的にどのような「ライブ」の手段を定義していませんが、私はそれが十分に合理的だと思います。

Answer 2

はい。 getComputedStyleは、CSSプロパティのliveコレクションを返します。

たびgetComputedStyle方法は新しいオブジェクトが返され、2つのオブジェクトはJavaScript、すなわちに等しいと見なされていません。：

getComputedStyle(el) === getComputedStyle(el) // false 

だけ{} === {} // falseのように呼ばれています。関連要素のスタイルが変更されるたびに、コレクションのプロパティが更新されます。これは、2つのオブジェクトの計算されたプロパティ値が等しいことを意味しますが、2つのオブジェクト自体は等しくありません。

cssStyleDeclaration1.color === cssStyleDeclaration2.color // true 

上記のコードスニペットは、2つの文字列（プリミティブ値）を比較するときにtrueを返します。