Есть ли способ в CSS, чтобы он выбирал случайный цвет шрифта из массива? Я знаю, что могу сделать это с серверной стороны или javascript, но мне интересно, есть ли для этого чистый способ CSS.
CSS выбирает случайный цвет из массива
Ответ 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, последняя строка может стать
$('#title').css('color', random_color);
Ответ 2
CSS-выражения (с учетом динамического содержимого script через CSS) были мерзостями, отбрасываемыми в недрах аффекта неэффективности наряду с веб-формами, только поддерживаемыми 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>
Ответ 3
Простой 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
Который будет выбирать новый цвет каждый раз, когда страница обновляется.
Ответ 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++;
}
}
Ответ 5
без использования предопределенного набора цветов, чтобы получить равномерно рандомизированную цветовую функцию
function randomColor(){
rc = "#";
for(i=0;i<6;i++){
rc += Math.floor(Math.random()*16).toString(16);
}
return rc;
}
или inline
"#"+Math.floor(Math.random() * 0x1000000).toString(16)