我正在尝试在我的论坛上创建一个圣诞节用户组,并希望使用 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>
最佳答案
在没有 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 获取所有元素,然后循环遍历每个元素。对于每个元素,我们获取用户名字符串并循环遍历每个字符。对于每个字符,您创建一个新的跨度,将其附加到元素,为其赋予字符,最后是颜色。
如果您有任何问题,请告诉我。
关于javascript - 如何改变每隔一个字母的字体颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8350691/