如何使用javascript替換網頁上的字母顏色？

Question

我正在嘗試使用javascript來替換網頁上特定div中每個字母的顏色。

我在一個論壇上找到了這個腳本，該論壇使用一種形式select來改變div單詞的顏色：

<script type="text/javascript" language="javascript">
var HTML = '';

    function alternate(colorpair) {
    var el = document.getElementById('alternator');
        if (!HTML) HTML = el.innerHTML;
            colorpair = colorpair.split('|');
            var text = HTML.split(' '), output = '';
            for (var w=0; w<text.length; w++) {
                output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
                output += ';">' + text[w] + '</span> ';
            }
            el.innerHTML = output;
        }
    </script> 

這是與之配套的html：

    <div id="alternator" class="none">
        This is how the line of text should look after the alternating color effect is applied. And so on, and so forth....
    </div>
    <br /><br />
    <form>
        <select style="font:200 11px arial;color:white;background:#333333;" onchange="alternate(options[selectedIndex].value)">
            <option>select colors</option>
            <option value="red|yellow">red & yellow</option>
            <option value="coral|olive">coral & olive</option>
            <option value="green|purple">green& purple</option>
            <option value="gold|silver">gold & silver</option>
            <option value="skyblue|darkorange">skyblue & dark orange</option>
        </select>
    </form>

就像我在上面說的，此腳本使用一種形式來更改單詞的顏色。

我可以更改它，以便字母在頁面加載時自動交替嗎？

Answer 1

這是一種實現方法，只需將JavaScript代碼替換為以下內容（並從HTML中刪除表單，因為您只希望在頁面加載時發生這種情況）：

var HTML = '';

function alternate(colorpair) {
    var el = document.getElementById('alternator');
    if (!HTML) HTML = el.innerHTML;
    var text = HTML.match(/\S\s*(?=\S)/g), output = '';
    for (var w=0; w<text.length; w++) {
        output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
        output += ';">' + text[w] + '</span>';
    }
    console.log(output);
    el.innerHTML = output;
}
alternate(['green', 'purple']);

請注意，使用此方法，您還將跳過空格，因此顏色看起來要好一些。 最終結果如下所示：

示例： http ： //jsfiddle.net/pzeCQ/

Answer 2

問題1：無需在函數范圍之外定義var HTML。 完全不需要定義它。

問題2：您正在用空格''分割，該空格會交替顯示單詞，而不是字母。

問題3：您不會剝離現有標簽，因此，如果一次選擇一個顏色對，然后再選擇另一個，則會將html放入文本中。

問題4：如果您選擇“選擇顏色”，則嘗試獲取不存在的colorpair [1]時將引發錯誤。

問題5：您要在每個字母的末尾添加空格，這將中斷進一步的嘗試，因為每個交替字符都是一個空格。 您只會看到一種顏色！ ：P

固定代碼：

function alternate(colorpair) {
    if(colorpair.indexOf('|') == -1) return;
    var el = document.getElementById('alternator');
    colorpair = colorpair.split('|');
    var letters = el.innerHTML.replace(/^\s*|\s*$/g,''). /*strip leading/trailing spaces*/
                  replace(/<[^>]*>/g,''). /*strip existing html tags */
                  split(''), 
        output = '';
    for (var w = 0, l = letters.length; w < l; w++) {
        output += '<span style="color:' + ((w % 2) ? colorpair[0] : colorpair[1]) + ';">' + letters[w] + '</span>';
    }
    el.innerHTML = output;
}

JSFiddle演示： http : //jsfiddle.net/xpZqs/

Answer 3

替換為：

var text = HTML.split(' '), output = '';
for (var w=0; w<text.length; w++) {
    output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
    output += ';">' + text[w] + '</span> ';
}

有了這個：

for (var c=0; c<HTML.length; c++) {
    output += '<span style="color:' + ((c%2) ? colorpair[0] : colorpair[1]);
    output += ';">' + HTML.CharAt(c) + '</span> ';
}

輸出將非常詳細。 如果要跳過空格，則需要為此添加一些邏輯。

Answer 4

我有一個簡單的演示：

這假定文本已經在頁面上，僅影響文本（使用innerText），並用所需的html替換div中的文本。

function alternateColours() {
    var div = document.getElementById("alternator");
    var message = div.innerText;
    html = "";
    var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
    for (var i = 0; i < message.length; i++)
        html += "<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "    </span>";
    div.innerHTML = html;
}
alternateColours();

我建議使用jQuery將函數附加到頁面加載中，這比必須自己做的清潔得多。