3

我正在寻找比较两个 Elements 以找到它们计算样式的所有差异。为了做到这一点，我遍历了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()

特别是，我会假设 和 之类的样式list-style-type应该content只适用于某些元素，只有在适用时才会出现在列表中。然而，无论如何，两者似乎都存在。

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

4

1 回答 1

0

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

于 2014-07-03T21:47:17.357 回答