Question

我希望比较两个元素以找出其计算样式中的所有差异。为了做到这一点，我正在迭代所有样式的 A ，并通过执行以下操作将它们与 B 进行比较：

var stylesA = window.getComputedStyle(a),
    stylesB = window.getComputedStyle(b),
    length = stylesA.length,
    i, style;

for(i = 0; i < length; i++) {
    style = stylesA[i];
    if(stylesA[style] != stylesB[style]) {
        // Respond appropriately
    }
}

我用断言做这个，A的长度总是 B的长度，但我纯粹是通过观察来实现的。尽管浏览器与浏览器的长度不同（考虑到新属性，供应商前缀版本等），但值似乎始终相同：

var elms = document.querySelectorAll("*"),
    length = elms.length, i;

for(i = 0; i < length; i++) {
    console.log(window.getComputedStyle(elms[i]).length);
}

应用于随机MDN页面时，为所有元素生成以下内容：

Chrome 35    253
Firefox 30   211
IE11         317

现在，显然这不是所有浏览器的详尽列表，这使我回到我的问题，这些值是否可以与某些元素不同？我没有发现DOM Level 2文档和getComputedStyle()上的MDN article。

特别是，我会假设list-style-type和content这样的样式（仅应用于某些元素）仅在适用时才会出现在列表中。然而，两者似乎都存在。

是否有某个文件可以验证我的断言？

Answer 1

您的断言确实是正确的：就getComputedStyle而言，没有特定于元素的CSS样式。但是，如果您包含SVG或MathML中的元素（例如，使用<svg>标记嵌入），事情可能会变得更复杂。

通过getComputedStyle返回的CSSStyleDeclaration对于给定的浏览器总是具有相同的长度吗？

1 个答案: