css - 如何在浏览器中轻松比较样式？

Question

我正在使用 Google Chrome 的开发人员工具来检查 CSS 样式。有时我需要比较页面上 2 个元素的样式，或者不同页面上的 2 个元素。

是否有可以让我轻松比较的工具或插件？现在我必须在视觉上看，来回切换，一次比较一件事。我希望有一个工具可以突出样式、来源、...

如果存在这样的工具，我愿意使用其他浏览器。

Answer 1

这应该可以帮助您比较同一页面上两个元素的计算样式差异（我不确定如何处理不同页面上的两个元素）：

function styleDifferences(a, b) {
    var as = getComputedStyle(a, null);
    var bs = getComputedStyle(b, null);
    var r = [];
    for (var i in as)
        if (as[i] !== bs[i])
            r.push(i + ' differs: ' + as[i] + ' | ' + bs[i]);
    return r.join('\n');
}

例子：

>>> styleDifferences(document.body, document.querySelector('pre'));
backgroundColor differs: rgb(255, 255, 255) | rgb(238, 238, 238)
borderCollapse differs: separate | collapse
fontFamily differs: Arial,Liberation Sans,DejaVu Sans,sans-serif | Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif
fontSize differs: 12.8px | 13.7px
height differs: 1928.28px | auto
lineHeight differs: 12.8px | 17.8px
marginBottom differs: 0px | 10px
maxHeight differs: none | 600px
overflow differs: visible | auto
paddingTop differs: 0px | 5px
paddingRight differs: 0px | 5px
paddingBottom differs: 0px | 5px
paddingLeft differs: 0px | 5px
textAlign differs: center | left
whiteSpace differs: normal | pre
width differs: 1423px | auto
MozColumnGap differs: 12.8px | 13.7px
overflowX differs: visible | auto
overflowY differs: visible | auto