如何在浏览器中轻松比较样式？答案

【问题标题】：How to easily compare styles in a browser?如何在浏览器中轻松比较样式？
【发布时间】：2011-10-26 18:15:15
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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

【讨论】：

有趣，你会在哪里定义函数？在检查员中？
是的，你可以在那里运行它来定义函数，或者更方便的是，在你页面的脚本中定义它。
如果您知道如何跨页面或标签进行比较，请告诉我，因为现在这更成问题