CSS從數組中挑選一個隨機顏色

CSS中有一種方法可以使它從數組中選取隨機的字體顏色嗎？我知道我可以用服務器端或JavaScript做到這一點，但我想知道是否有純CSS的方式來做到這一點。CSS從數組中挑選一個隨機顏色

2013-02-20 Saqib Ali

您可以用JavaScript做，但不只是CSS。你用Javascript的答案沒問題嗎？ – dezman 2013-02-20 16:16:27

不，你不能。對於初學者來說，在CSS中沒有'array'這樣的東西。 – 2013-02-20 16:16:39

這在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，最後一行可能成爲

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

來源

2013-02-20 16:16:21 bdesham

謝謝。但我正在尋找一種純粹的CSS方式。似乎完全不可能使用CSS。 – 2013-02-20 16:22:27

你應該prolly標記[爆炸藥丸]（http://stackoverflow.com/a/14984994/766570）答案作爲正確的..它是沒有道理的，不正確的答案（由你自己承認）得到更多的選票比正確的 – abbood 2013-02-20 16:56:08

@abbood Explosion Pills的答案很有趣，但是：「只有IE7及以下版本才支持」。解決OP的問題不是一個現實的方法。 – bdesham 2013-02-20 16:57:08

在JavaScript與jQuery開發的簡單。

你可以這樣做：

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

這將每次選擇新的顏色的頁面刷新。

來源

2013-02-20 16:21:57

CSS表達式（允許通過CSS實現動態腳本內容）與Web Forms一樣處於無效率地獄的底層，只有IE7及以下版本才支持。但是，因爲你問。

<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>

來源

2013-02-20 16:31:29

+16

開頭你是個怪物！ – bdesham 2013-02-20 16:34:47

好的，它只是我還是人們對這個問題的投票是totallay隨機？這*是正確的答案 – abbood 2013-02-20 16:54:12

@abbood這是正確的答案，如果這隻適用於IE7及以下？ – emzero 2014-03-27 04:58:02

這就是我做到的。

第一部分是連續的順序，元件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++; 
    } 
}

來源

2015-05-20 10:24:11 Jason

不使用預定義的顏色設置，以獲得均勻隨機顏色功能

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)

來源

2017-03-06 05:59:43

CSS從數組中挑選一個隨機顏色

回答

相關問題