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(
    Element elt,
    optional DOMString? pseudoElt
  );
};

实际上，每次调用它时，都会得到一个不同的对象。这是因为[NewObject]：

如果[NewObject] extended attribute出现在 regular或static operation，然后就表明了这一点在调用操作时，必须引用新创建的对象总是被退回。

但是，返回的声明必须是实时的：

返回具有以下属性的实时CSS声明块：


readonly flag：设置。

declarations：所有supported CSS properties的手写属性，按字典顺序排列，其值为使用与 doc resolved value >

parent CSS rule：无效。

owner node： obj 。

规范没有明确定义“实时”的含义，但我认为这是合理的。

Answer 2

是。 getComputedStyle返回live个CSS属性集合。

每次调用getComputedStyle方法时，都会返回 new 对象，并且在JavaScript中认为2个对象不相同，即：

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

就像{} === {} // false一样。只要更改相关元素的样式，就会更新集合的属性。这意味着2 CSSStyleDeclaration个对象的计算属性值相等，但2个对象本身不相等。

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

上面的代码片段在比较2个字符串（原始值）时返回true。

Window.getComputedStyle（）的结果是否始终是最新的？

2 个答案: