Change every other letters font color? (JavaScript)

问题:

I'm trying to create a Christmas user group on my forums, and would like to replace the users name with a green/red pattern using JavaScript. So basically, JavaScript would turn every other letter within a specific CSS class into green, and the others would stay red.

So this is what it looks like now:

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

I'd like JavaScript to turn it into something like this:

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

回答1:

As long as your <span> doesn't contain any HTML you could do this.

$('.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>');         }     } }); 

It would be a bit more complicated if your <span> did contain HMTL.

Edit: This is with jQuery BTW. Not sure if that is OK.

回答2:

In pure JavaScript without jQuery dependency.

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';     } } 

If you have/need/want to use classes instead of setting the color attribute directly, then swap the following lines

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

Basically, we grab all elements with style6, and then loop through each. For each element we grab the username string and loop through each character. For each character, you create a new span, append it to the element, give it the character, and finally a color.

Let me know if you have any questions.

jsfiddle here

回答3:

EDIT - sorry, I just saw that you didn't have jQuery tagged on your question. If you can use it, the below should get you close.

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); } 

You'll need to traverse the text, and append a new span with the desired css color set alternately to red or green.

You can access individual characters of a string by indexing it, just like in c#. So if var str = "Adam" then str[0] would equal 'A'

Also, the ? operator is known as the conditional operator, or ternary operator. It simplifies the writing of if else statements, where either branch results in the assignment of the same variable. For example:

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

Is the same as

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

文章来源: Change every other letters font color? (JavaScript)