比较不同页面上元素的CSS属性

时间:2016-05-02 07:38:10

标签: html css google-chrome firefox

我正在寻找一种比较两个不同网页上的元素的好方法。这是四年多前的问题。我希望今天有一些现有的东西不存在。

A tool to compare element properties on different pages

3 个答案:

答案 0 :(得分:1)

根据 Computed Style ,应该解决您遇到的问题的两类测试是Frozen DOMcsste.st技术。

Csste.st引用了应用这些技术的所有项目,但请注意,该网站在过去两年内未经过更新。从那时起,大多数工具仍在使用,很少有人创建,但仍有 新工具。

计算风格技巧:

  

使用这种技术,测试单元包含访问被测元素所需的CSS选择器以及应该应用于元素的样式列表。与Frozen DOM不同,此技术不保留项目DOM的本地副本。这意味着它可以更可靠。

冻结DOM技术:

  

使用Frozen DOM测试,我们的想法是拍摄您要测试的页面的DOM结构的快照以及当前应用于这些DOM元素的样式。您还记录元素的CSS选择器,以便测试可以找到它。当您在CSS中进行更改时,将新样式表应用于(旧)Frozen DOM。如果通过级联应用于元素的样式是先前和预期测量的样式,则计为通过。如果没有,那就失败了。

答案 1 :(得分:0)

我认为您可以使用本地存储。 保存在一个页面中并从另一个页面使用它。

什么是HTML本地存储?

使用本地存储,Web应用程序可以在用户的​​浏览器中本地存储数据。

在HTML5之前,应用程序数据必须存储在cookie中,包含在每个服务器请求中。本地存储更安全,可以在本地存储大量数据,而不会影响网站性能。

http://www.w3schools.com/html/html5_webstorage.asp

答案 2 :(得分:-1)

我找到了一个方便的Chrome应用,该应用似乎可以满足您的要求。

签出CSS Diff,以区分不同标签中应用于不同元素的CSS。