Google Chrome的两种元素样式之间的区别 [英] Difference between two element styles with Google Chrome

问题描述

我使用Google Chrome开发人员工具，我经常检查一个元素来反对其他元素，以了解可能导致特定样式问题的原因。

很好地比较元素1和元素2之间的风格差异。

这可以用chrome目前或通过一些解决方法吗？有没有一个工具，可以做我正在寻找什么？

当前样式差异的例子是，我有一个内联在 A 旁边的，其中 A

解决方案

---

更新：由于此次讨论，

---

扩展的好问题和好主意！

概念证明

作为概念的证明，我们可以在这里做一个小技巧，避免创建扩展。 Chrome保持通过变量中的inspect element按钮选择的元素。在 $ 0 中的最后一个选择的元素，在 $ 1 等之前。在此基础上，我创建了一个小片段比较最后两个检查元素：

 （function（a，b）{
 var aComputed = getComputedStyle ; 
 var bComputed = getComputedStyle（b）; 
 
 console.log（'------------------------ ------------------'）; 
 console.log（'You are comparing：'）; 
 console.log（'A：'， a）; 
 console.log（'B：'，b）; 
 console.log（'---------------------- --------------------'）; 
 
 for（var aname in aComputed）{
 var avalue = aComputed [aname] ; 
 var bvalue = bComputed [aname]; 
 
 if（aname ==='length'|| aname ==='cssText'|| typeof avalue ===function） {
 continue; 
} 
 
 if（avalue！== bvalue）{
 console.warn（'Attribute'+ aname +'different：'）; 
 console.log（'A：'，avalue）; 
 console.log（'B：'，bvalue）; 
} 
} 
 
 console.log（'--------------------------- ---------------'）; 
}）（$ 0，$ 1）; 
  

如何使用？

检查两个要比较的元素，一个接一个，然后将上面的代码粘贴到控制台。

结果 / p>

I use Google Chrome developer tools and I am constantly inspecting one element against another back and forth to find out what may be causing a particular styling issue.

It would be nice to compare the differences in style between element 1 and element 2.

Can this be done with chrome currently or via some workaround? Is there a tool out there that can do what I am looking for?

Current example of style difference is that I have an inline H4 next to a A where the A is appearing higher in vertical alignment. I am not seeking a solution in this question as I will sort it out.

解决方案

---

Update: As a result of this discussion, the "CSS Diff" Chrome extension was created.

---

Great question and cool idea for extension!

Proof of concept

As a proof of concept, we can do a small trick here and avoid creating extension. Chrome keeps elements you select via 'inspect element' button in variables. Last selected element in $0, one before that in $1 etc. Basing on this, I've created a small snippet that compares last two inspected elements:

(function(a,b){    
    var aComputed = getComputedStyle(a);
    var bComputed = getComputedStyle(b);

    console.log('------------------------------------------');
    console.log('You are comparing: ');
    console.log('A:', a);
    console.log('B:', b);
    console.log('------------------------------------------');

    for(var aname in aComputed) {
        var avalue = aComputed[aname];
        var bvalue = bComputed[aname];

        if( aname === 'length' || aname === 'cssText' || typeof avalue === "function" ) {
            continue;
        }

        if( avalue !== bvalue ) {
            console.warn('Attribute ' + aname + ' differs: ');
            console.log('A:', avalue);
            console.log('B:', bvalue);
        }
    }

    console.log('------------------------------------------');
})($0,$1);

How to use it?

Inspect two elements you want to compare, one after another, and paste the code above to console.

Result

这篇关于Google Chrome的两种元素样式之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！