如何更改每个其他字母的字体颜色？

Question

我正在尝试在我的论坛上创建一个圣诞节用户组，并希望使用 JavaScript 将用户名替换为绿色/红色模式。所以基本上，JavaScript 会将特定 CSS 类中的所有其他字母都变成绿色，而其他字母则保持红色。

所以这就是它现在的样子：

<span class="style6">Username</span>

我希望 JavaScript 把它变成这样：

<span class="style6">
    <span class="color_red">U</span>
    <span class="color_green">s</span>
    <span class="color_red">e</span>
    <span class="color_green">r</span>
    <span class="color_red">n</span>
    <span class="color_green">a</span>
    <span class="color_red">m</span>
    <span class="color_green">e</span>
</span>

Answer 1

在没有 jQuery 依赖的纯 JavaScript 中。

var elements = document.querySelectorAll('.style6');

for(var i=0,l=elements.length;i<l;++i) {

    var str = elements[i].textContent;
    elements[i].innerHTML = '';

    for(var j=0,ll=str.length;j<ll;++j) {
        var n = document.createElement('span');
        elements[i].appendChild(n);
        n.textContent = str[j];
        n.style.color = (j % 2) ? 'red' : 'green';
    }
}

如果您有/需要/想要使用类而不是直接设置颜色属性，请交换以下几行

n.style.color = (j % 2) ? 'red' : 'green';               //Swap This
n.classList.add((j % 2) ? 'color_red' : 'color_green');  //With This

基本上，我们使用 style6 抓取所有元素，然后遍历每个元素。对于每个元素，我们获取用户名字符串并循环遍历每个字符。对于每个字符，您创建一个新的跨度，将其附加到元素，赋予它字符，最后一个颜色。

如果您有任何问题，请告诉我。

jsfiddle在这里