有沒有辦法讓CSS中的每個單詞都有不同的顏色？

所以我想讓文本中的每個單詞都變成不同的顏色，但我只找到代碼來使文本中的每個字母變成不同的顏色。有沒有什麼辦法可以改變每個字母而不是每個字母的顏色？有沒有辦法讓CSS中的每個單詞都有不同的顏色？

<script type="text/javascript"> 
     var message = "The quick brown fox."; 
     var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue 
     for (var i = 0; i < message.length; i++) 
      document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>"); 
    </script>

來源

2012-09-29 MSmS

IMHO由空格和環陣列拆分信息。 – YvesR

是的，答案是將字符串拆分爲單詞數組。看到這也是這個職位：http://stackoverflow.com/questions/2817646/javascript-split-string-on-space-or-on-quotes-to-array –

需要做小的更改。

斯普利特消息轉換爲空間陣列（" "）

var message = "The quick brown fox."; 
    var messageArr = message.split(" "); 
    var colors = ["#ff0000","#00ff00","#0000ff"]; // red, green, blue 
    for (var i = 0; i < messageArr .length; i++) 
    { 
     document.write("<span style='color:" + colors[(i % colors.length)] + ";'>" + messageArr[i] + " </span>"); 
    }

看到它在this JSFiddle

注：我也改變了colors數組定義使用數組文本符號[] ，這是一種聲明數組的稍微好一些的方法。

來源

2012-09-29 12:57:22

var message = "The quick brown fox.", 
    words = message.split(/\s+/), 
    colors = ['#ff0000', '#00ff00', '#0000ff']; 

for (var i = 0; i < words.length; i++) { 
    document.write('<span style="color: ' + colors[(i % colors.length)] + ';">' + words[i] + '</span>'); 
}

來源

2012-09-29 12:58:13

var text = "Glee is very very awesome!"; 
text = text.split(" "); 
var colors = ["red", "green", "rgb(0, 162, 232)"]; //you can use color names, as well as RGB notation 
var n = colors.length; //no need to re-grab length each time 
for(var i = 0; i < text.length; i ++) { 
    document.write('<span style = "color: ' + colors[i % n] + '">' + text[i] + '</span>'); 
}

小演示：little link。

來源

2012-09-29 13:00:17 Chris

讓我們嘗試一些不同的方式。 The live demo.

var message = "The quick brown fox.", 
    colors = ["#ff0000","#00ff00","#0000ff"], 
    i = 0, len = colors.length; 

message = message.replace(/\b(\w+)\b/g, function (match, word) { 
    return '<span style="color: ' + colors[(i++ % len)] + ';">' + word + '</span>'; 
}); 
document.write(message);

來源

2012-09-29 13:03:51 xdazz

有沒有辦法讓CSS中的每個單詞都有不同的顏色？

回答

相關問題