如何更改整個網頁中單個字母的顏色？

Question

我正在運行一個實驗，在該實驗中，我們試圖訓練人們成爲通感（他們有額外的與數字或字母相關的顏色體驗）。

我想知道是否有人建議修改web瀏覽器（如firefox）的最簡單方法，以便只有10個字母A-J總是以特定顏色顯示在他們訪問的任何頁面上？

非常感謝

Answer 1

有很多方法可以做到這一點（跨瀏覽器）：

例如，你可以在樣式表中定義 - 元素有不同的顏色。 加載文檔時，通過JavaScript/jQuery檢查指定字母的整個文檔（但僅限標籤的內容）並添加-tag f.e.在他們旁邊。

不是最好的解決方案，而是一種方法。

Answer 2

看看Greasemonkey，一個專爲做這種事情的FireFox插件。在http://userscripts.org/上有很多預製腳本，其中有幾個看起來像他們會幫助您弄清楚如何編寫自己的顏色來重新對單個字母進行重新着色。

Answer 3

這裏只是一個潛在解決方案測試版藍圖初步形式的抽象草稿：在書籤中使用鏈接的前綴javascript:，如下所示。

1. 創建您的書籤工具欄
2. 在URL輸入一個新的條目，複製/粘貼以下行：javascript:var html = document.body.innerHTML; html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>'); while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) {html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3');} document.body.innerHTML = html;
3. 給你的書籤名稱（例如，「AJ紅」）和保存
4. 您現在可以訪問任何網站，並點擊該書籤，這將會把一個和j之間的所有字母爲紅色

在更易消化方式：

// get the content of the body 
var html = document.body.innerHTML; 
// surround any letter between a and j by a <span></span> 
html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>'); 
// but it also replaces a-j letters within html tags 
while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) { 
    // so if there are html tags within other html tags, delete the created <span></span> 
    html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3'); 
} 
// and replace the innerHTML of the body 
document.body.innerHTML = html; 

這真的不是最終的解決方案，但是，也許你可以通過它來改善結果。

PS：不要試圖用IE ...