Html CSS 从数组中选择一个随机颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14984643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS pick a random color from array
提问by Saqib Ali
Is there is a way in CSS to make it pick a random font color from an array? I know I can do this with server side or javascript, but I am wondering if there is pure CSS way to do this.
CSS 中有没有办法让它从数组中选择随机字体颜色？我知道我可以用服务器端或 javascript 来做到这一点，但我想知道是否有纯 CSS 方式来做到这一点。
回答by Explosion Pills
CSS expressions (allowing for dynamic script content via CSS) were abominations cast in the bowels of the hell of inefficiency alongside Web Forms, only ever supported by IE7 and below. But since you asked.
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>
回答by bdesham
This is not possible in CSS, which is firmly deterministic. You could do this with client-side JavaScript, though:
这在 CSS 中是不可能的，它是确定性的。不过，您可以使用客户端 JavaScript 执行此操作：
var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('title').style.color = random_color;
If you're using jQuery, the last line could become
如果您使用 jQuery，最后一行可能会变成
$('#title').css('color', random_color);
回答by Saqib Ali
Simple in JavaScript with JQuery.
使用 JQuery 在 JavaScript 中很简单。
You could do something like:
你可以这样做：
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
Which would select a new color every time the page refreshes.
每次页面刷新时都会选择一种新颜色。
回答by Jason
This is how I did it.
我就是这样做的。
The first part is a sequential order, element 1 gets color 1 etc.
第一部分是顺序，元素 1 获得颜色 1 等。
Then when you are out of colors it will randomize it.
然后当你没有颜色时，它会随机化它。
//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++;
}
}
回答by emrhzc
without using predefined color set, to get a uniformly randomized color function
不使用预定义的颜色集，以获得均匀随机的颜色函数
function randomColor(){
rc = "#";
for(i=0;i<6;i++){
rc += Math.floor(Math.random()*16).toString(16);
}
return rc;
}
or inline
或内联
"#"+Math.floor(Math.random() * 0x1000000).toString(16)
