如何使用 JavaScript 改变网页上的字母颜色？

我正在尝试使用 javascript 更改网页上特定 div 中每个字母的颜色。

我在论坛上发现了这个脚本，它使用表单选择来交替 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>

正如我上面所说，该脚本使用form改变颜色words.

我可以改变这个以便letters备用自动地在页面加载时？

问题#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/