2016-05-02 73 views
0

我正在尋找一種比較兩個不同網頁上的元素的好方法。這是四年多前提出的。我希望今天有一些不存在的東西。比較不同頁面上的元素的CSS屬性

A tool to compare element properties on different pages

+0

你好。歡迎來到Stack Overflow。請環顧四周,參加[旅遊],並通讀[幫助中心]。你也可以閱讀關於[問]一個很好的問題。 – Sampada

+0

是否想比較在開發中應用於您的網站的CSS或生產中/實時頁面中的計算值?前者:您可以使用[PostCSS](https://github.com/postcss/postcss)API編寫一個插件來保留相關規則(然後您可以對它們進行排序和比較)。後者:你必須得到兩個頁面的計算值並進行比較(我不知道任何腳本) – FelipeAls

+0

不是你正在尋找的東西,但仍然有用:[Firediff](http://getfirebug.com /wiki/index.php/Firebug_Extensions#Firediff)會告訴你什麼被刪除並添加到頁面。一個可視化迴歸工具(也可以比較2個不同頁面中的2個元素,而不是2個時刻)是[PhantonCSS](https://github.com/Huddle/PhantomCSS) – FelipeAls

回答

0

我想你可以使用本地存儲。 保存在一個頁面,並從另一個頁面使用它。

什麼是HTML本地存儲?

通過本地存儲,Web應用程序可以在用戶的​​瀏覽器中本地存儲數據。

在HTML5之前,應用程序數據必須存儲在cookie中,幷包含在每個服務器請求中。本地存儲更安全,大量數據可以存儲在本地,而不會影響網站性能。

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

1

2類的應該解決您遇到的問題測試Computed StyleFrozen DOM根據csste.st技術。

Csste.st引用了所有應用這些技術的項目,但要注意,該網站在過去的2年中還沒有更新。大多數工具仍然是,自那時以來很少創建,但仍然有新的。

計算樣式技術:

利用該技術,所述測試單元包含訪問被測元素以及應施加到元件的樣式的列表所需要的CSS選擇。與Frozen DOM不同,此技術不保留項目DOM的本地副本。這意味着它可以更可靠。

冷凍DOM技術:

凍結的DOM測試,這個想法是把你要測試的頁面的DOM結構的快照和當前應用到這些樣式DOM元素。您還記錄元素的CSS選擇器,以便測試可以找到它。當您在CSS中進行更改時,將新樣式表應用於(舊)Frozen DOM。如果通過級聯應用於元素的樣式是早期和預期測量的樣式,則它視爲通過。如果沒有,這是一個失敗。

相關問題