25

CSS中有没有办法让它从数组中选择随机字体颜色？我知道我可以使用服务器端或 javascript 来做到这一点，但我想知道是否有纯 CSS 方式来做到这一点。

4

5 回答 5

63

CSS 表达式（允许通过 CSS 实现动态脚本内容）是与 Web 表单一起陷入低效地狱的可憎之物，只有 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-20T16:31:29.170 回答
36

这在具有确定性的 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-20T16:16:21.220 回答
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

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

于 2013-02-20T16:21:57.897 回答
1

我就是这样做的。

第一部分是顺序，元素 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-20T10:24:11.683 回答
0

不使用预定义的颜色集，以获得均匀随机的颜色函数

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-06T05:59:43.453 回答