3

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

8
  • через js или бекенд менять, рандомно или неочень ... вопрос слишком общий. 10 сен 2017 в 14:48
  • ну что бы хотя бы три разных стиля повесить. можно и рандомно. Я просто не понимаю принцип как такое сделать вообще. Мне бы пример хоть где то посмотреть 10 сен 2017 в 14:57
  • опишите конкретно на примере какого-то блока, как он выглядит, что должно меняться и как (каждый раз новое или по какому-то принципу) .... способов это сделать десятки и все они зависят от того что конкретно требуется получить в итоге. 10 сен 2017 в 15:06
  • И поясните, должны ли применятся рандомные стили для каждого необходимого элемента, или с разделением на группы? Т.е. элементам с классом, например, .icon "выпадают" рандомные стили из одного диапазона, а элементам с .text - из другого?
    – Cheg
    10 сен 2017 в 15:15
  • мы имеем кнопки с одним классом .class1 к примеру и разными id к примеру #id1 #id2 #id3 вот как сделать что бы при нажатии F5 у кнопки применялся другой #id а класс оставался прежний? 10 сен 2017 в 15:23

1 ответ 1

6

На чистом 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;
}
<div class="class"></div>
<div class="class"></div>
<div class="class"></div>

Этот же вариант на 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class"></div>
<div class="class"></div>
<div class="class"></div>

2
  • Спасибо огромное приогромнейшее. 10 сен 2017 в 15:49
  • @АлександрКазбанов Пожалуйста
    – Cheg
    10 сен 2017 в 15:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.