从数组中随机选择一个CSS颜色

Question

在 CSS 中是否有一种方法可以从数组中随机选择字体颜色？我知道可以通过服务器端或 JavaScript 实现此操作，但我想知道是否有纯 CSS 的方法。

- Saqib Ali

---

你可以用JavaScript实现，但不能只用CSS。你接受JavaScript的答案吗？ - dezman

不行。首先，在CSS中没有“array”的概念。 - Wesley Murch

Answer 1

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>

- Explosion Pills

---

好的，是我自己的感觉还是人们对这个问题的投票完全是随意的？这确实是正确的答案。 - abbood

@abbood 如果这只在IE7及以下版本中有效，那么这怎么是正确答案呢？ - empz

那是一个准确的描述。 - serraosays

我无法使用这个片段实现它。 <marquee> 将使我的文本从右到左浮动，但这也会在没有任何样式表的情况下发生。而且似乎没有任何颜色... - Alex Cio

跑马灯是讽刺的。我简直不敢相信跑马灯仍然能够工作。 - R Reveley

Answer 2

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

- bdesham

---

谢谢。但我正在寻找一种纯CSS的方法。看起来纯粹使用CSS是不可能的。 - Saqib Ali

你应该将爆炸药丸的答案标记为正确答案。不合逻辑的是，错误答案（根据你自己的承认）获得了比正确答案更多的投票。 - abbood

@abbood Explosion Pills的回答很有趣，但是：“只有IE7及以下版本支持”。这不是解决OP问题的现实方法。 - bdesham

我不建议一开始就在IE7及以下版本中使用它们。 - Explosion Pills

Answer 3

使用JQuery使JavaScript变得简单。

你可以像这样做：

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

每次页面刷新时都会选择新颜色。

- user2091947

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++;
    }
}

- Jason

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)

- emrhzc

Answer 6

如果你想将一组颜色分配给一个项目列表，并使它们看起来像是随机选择的，或者你只是想避免总是使用相同的颜色，那么你可以使用nth-child和mod。例如：

li:nth-child(6n) {  background-color:  rgb(249, 195, 141);}
li:nth-child(6n+1) { background-color:  rgb(173, 255, 173);}
li:nth-child(6n+2) { background-color:  rgb(255, 255, 203);}
li:nth-child(6n+3) { background-color:  rgb(166, 197, 255);}
li:nth-child(6n+4) { background-color:  rgb(244, 197, 242);}
li:nth-child(6n+5) {  background-color:  rgb(255, 174, 178);}

当然，这不是真正的数学随机，但是如果与页面中可见数字相比有足够多的颜色，读者会失去追踪，并产生接近随机的印象。

更多信息请参见：{{link1：使用模运算符的nth-child}}

- Francis