更改每隔一個字母的字體顏色？（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）