javascript - H1のランダムな色の単語

Question

H1の各単語をランダムな色にすることは可能ですか？ページを更新すると、これらの単語は再びランダム化されますか？

使いたい色は5色あります。これをどのようにコーディングしますか？

Answer 1

はい、それは可能です：

var colors = ['red', 'yellow', 'blue', 'green', 'black'];
$('h1').each(function(){
    $(this).html($(this).text().split(' ').map(function(v){
        return '<span style="color:'+colors[Math.floor(Math.random()*colors.length)]+'">'+v+'</span>';
    }).join(' '));
});​​​​​​

主なアイデアは、各h1のコンテンツを単語に分割し、単語の<span>スタイルを設定することはできず、要素のみをスタイル設定できるため、単語を埋め込んで置き換えることです。

デモンストレーション