更改每隔一个字母的字体颜色？（JavaScript）

我正在尝试在我的论坛上创建一个圣诞节用户组，并且想用JavaScript代替绿色/红色模式的用户名。所以基本上，JavaScript会将特定CSS类中的所有其他字母变成绿色，而其他字母会保持红色。更改每隔一个字母的字体颜色？（JavaScript）

所以这是它看起来像现在：

<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>

来源

2011-12-02 Josh Foskett

那么你有什么尝试？ – Strelok

只要你<span>不包含你能做到这一点的任何HTML。

$('.style6').each(function(){ 
    var letters = $(this).text().split(''); 
    $(this).text(''); 
    for(var i = 0; i < letters.length; i++){ 
     if(i % 2 == 0){ 
      $(this).append('<span class="color_red">' + letters[i] + '</span>'); 
     } 
     else{ 
      $(this).append('<span class="color_green">' + letters[i] + '</span>'); 
     } 
    } 
});

如果您的<span>确实包含HMTL，那会更复杂一点。

编辑：这是与jQuery BTW。不知道这是否正确。

来源

2011-12-02 01:41:56

但它是圣诞节！你需要添加：setInterval（function（）{var reds = $（“。style6 .color_red”）; $（“。style6 .color_green”）。attr（“class”，“color_red”）; reds。ATTR（ “类”， “COLOR_GREEN”）; }，700）;' – nnnnnn

P.S.忘了附上jsfiddle：http://jsfiddle.net/6a36b/ – nnnnnn

编辑 - 对不起，我刚才看到你没有在你的问题上标记jQuery。如果你可以使用它，下面应该让你关闭。

var textToChange = $(".style6").text(); 
for(var i = 0; i < textToChange.length; i++) { 
    var newSpan = $("<span />") 
        .text(textToChange[i]) 
        .css("color", i % 2 == 0 ? "green" : "red"); 
    $("#divToAddThisTo").append(newSpan); 
}

您需要遍历文本，并将所需的css颜色集合交替添加到红色或绿色。

您可以通过索引来访问字符串的单个字符，就像在c＃中一样。所以如果var str = "Adam"然后str[0]将等于'A'

另外，运算符被称为条件运算符或三元运算符。它简化了if语句的写入，其中任一分支都会导致赋值相同的变量。例如：

var x, y = 1; 

x = y == 1 ? "one" : "not one";

相同

if (y == 1) 
    x = "one"; 
else 
    x = "not one";

来源

2011-12-02 01:40:01

你可能想解释一下？逻辑给他。 – comu

@Jonah - 的确 - 完成 –

非常好，现在看起来好多了 – comu

在没有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

基本上，我们抓住通过与灰色庄重的所有元素，然后循环每。对于每个元素，我们抓住用户名字符串并循环遍历每个字符。对于每个角色，您创建一个新的跨度，将其附加到元素，给它一个字符，最后再添加一个颜色。

让我知道如果您有任何问题。

jsfiddle here

来源

2011-12-02 02:00:17 jyore

更改每隔一个字母的字体颜色？ （JavaScript）

回答

相关问题

更改每隔一个字母的字体颜色？（JavaScript）