Подтвердить что ты не робот

CSS выбирает случайный цвет из массива

Есть ли способ в CSS, чтобы он выбирал случайный цвет шрифта из массива? Я знаю, что могу сделать это с серверной стороны или javascript, но мне интересно, есть ли для этого чистый способ CSS.

4b9b3361

Ответ 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)