Разный css при обновлении страницы F5

Веб дизайн только познаю, хотя занимаюсь им давненько, но понимаю что это бездна знаний и вот по сути вопрос в чем. Как сделать разный CSS при перезагрузке страницы? Разные иконки например, что бы разным посетителям сайта показывались разные иконки. И при обновлении нажимая на F5 менялись стили иконок. ???

Ответ

На чистом JavaScript
var styles = ['blue', 'red', 'green']; // диапазон значений randomStyles('class', styles); // вызываем функцию "рандомных стилей" function randomStyles(sel, arr) { // sel - селектор, arr - диапазон значений var els = document.getElementsByClassName(sel), // получаем элементы с необходимым классом newArr = arr; // объявляем новый массив for (let i = 0; i < els.length; i++) { // перебираем все элементы с классом var randClass = newArr[Math.floor(Math.random() * newArr.length)]; // рандомное значение из массива els[i].classList.add('class-' + randClass); // добавляем элементу класс с полученным значением newArr.splice(newArr.indexOf(randClass), 1); // удаляем из массива подставленный класс, чтобы избежать повтора } } .class { width: 200px; height: 50px; margin-bottom: 10px; } .class-blue { background: blue; } .class-red { background: red; } .class-green { background: green; }

Этот же вариант на jQuery (производительность ниже, но вдруг кому-то пригодится):
var styles = ['blue', 'red', 'green']; // диапазон значений randomStyles('.class', styles); // вызываем функцию "рандомных стилей" function randomStyles(sel, arr) { // sel - селектор, arr - диапазон значений var els = $(sel), // получаем элементы с необходимым классом newArr = arr; // объявляем новый массив els.each(function(id) { // перебираем все элементы с классом var randClass = newArr[Math.floor(Math.random() * newArr.length)]; // рандомное значение из массива $(this).addClass('class-' + randClass); // добавляем элементу класс с полученным значением newArr.splice($.inArray(randClass, newArr), 1); // удаляем из массива подставленный класс, чтобы избежать повтора }); } .class { width: 200px; height: 50px; margin-bottom: 10px; } .class-blue { background: blue; } .class-red { background: red; } .class-green { background: green; }