改变其他所有字母的字体颜色? (JavaScript的)

时间:2011-12-02 01:29:31

标签: javascript jquery css

我正在尝试在论坛上创建一个圣诞用户组,并希望使用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>

3 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:3)

编辑 - 抱歉,我刚看到您的问题没有标记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 else语句的编写,其中任一分支导致同一变量的赋值。例如:

var x, y = 1;

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

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

答案 2 :(得分:3)

只要您的<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。不确定是否可以。