CSSは配列からランダムな色を選択します

Question

CSSで配列からランダムなフォント色を選択する方法はありますか？私はサーバーサイドまたはJavaScriptでこれを行うことができることを知っていますが、これを行うには純粋なCSSの方法があるのだろうかと思っています。

Answer 1

これはCSSでは不可能です。これはしっかりと決定的です。あなたはしかし、クライアント側のJavaScriptでこれを行うことができます：

var colors = ['#ff0000', '#00ff00', '#0000ff']; 
var random_color = colors[Math.floor(Math.random() * colors.length)]; 
document.getElementById('title').style.color = random_color; 

あなたはjQueryのを使用している場合は、最後の行は、jQueryを使ってJavaScriptでシンプル

$('#title').css('color', random_color); 

Answer 2

になる可能性があります。たびに新しい色にページの更新を選択することになる

var hexArray = ['#hexVal','#hexVal','#hexval', '#hexval'] 
var randomColor = hexArray[Math.floor(Math.random() * hexArray.length)]; 

$("#divId").css("color",randomColor); //A class selector would work too 

：

あなたのような何かを行うことができます。

Answer 3

CSS式（CSSを使った動的スクリプトコンテンツを許可）は、IE7以降でのみサポートされているWebフォームと並んで、効率の悪いところにキャストされました。しかし、あなたが尋ねたので。

<style> 
blink marquee { 
    color: expression("rgb(" + Math.floor(Math.random() * 255) 
     + "," + Math.floor(Math.random() * 255) + "," 
     + Math.floor(Math.random() * 255) + ")"); 
} 
</style> 
<blink> 
    <marquee> 
     color me beautiful 
    </marquee> 
</blink> 

Answer 4

これが私のやり方です。

最初の部分が順番で、要素1を使用すると、色の外にあるとき、それはそれをランダム化します色1など

を取得します。

//Specify the class that you want to select 
var x = document.getElementsByClassName("ms-webpart-chrome-title"); 
var i; 
var c; 

//specify the colors you want to use 
var colors = ["#009933", "#006699", "#33cccc", "#99cc00", "#f60"]; 
var d = colors.length; 

for (i = 0; i < x.length; i++){ 
    while (i < d) { 
     c = i; 
     var random_color = colors[c]; 
     x[i].style.borderTopColor = random_color; 
     i++; 
    } 
    while (i >= d) { 
     var random_color = colors[Math.floor(Math.random() * colors.length)]; 
     x[i].style.borderTopColor = random_color; 
     i++; 
    } 
} 

Answer 5

定義済みのカラーセットを使用することなく、均一にランダム化された色の機能を得るために

function randomColor(){ 
    rc = "#"; 
    for(i=0;i<6;i++){ 
     rc += Math.floor(Math.random()*16).toString(16); 
    } 
    return rc; 
} 

またはインライン

"#"+Math.floor(Math.random() * 0x1000000).toString(16)