Изменить несколько CSS на основе логического значения - PullRequest
Новая
       0

Изменить несколько CSS на основе логического значения

0 голосов
/ 23 марта 2020

Я создаю страницу, которая меняется в зависимости от местного времени в течение дня. Если вечер, есть другое фоновое изображение, цвет другой и так далее. Я сделал несколько изменений с document.getElementById();, но это займет слишком много времени для каждого элемента.

Я думал, возможно, есть короткий способ выполнить несколько css кодов, основанных на логических результатах. Я попытался найти что-то вроде @input css, но не смог найти больше.

Редактировать: я на самом деле имею в виду "Возможно, есть короткий способ ИЗМЕНИТЬ несколько css кодов из разных div и идентификаторов". Например: color: из #message отличается в зависимости от времени дня

1 Ответ

0 голосов
/ 23 марта 2020

Используя JavaScript, вы можете добавлять различные классы к вашему элементу body в зависимости от того, какое сейчас время дня. Затем вы можете использовать эти классы для стилизации любого другого элемента на странице. 

const hour = new Date().getHours();

let className = 'morning';

if (hour > 21) {
  className = 'night';
} else if (hour > 18) {
  className = 'evening';
} else if (hour > 12) {
  className = 'afternoon';
}

document.body.classList.add(className);
.bg {
  background: red;
  color: white;
}

.night .bg {
  background: black;
}

.evening .bg {
  background: orange;
}

.afternoon .bg {
  background: yellow;
}

.morning .bg {
  background: green;
}
<html>
<head>
</head>
<body>
  <div class="bg">
    <p>Lorem ipsum...</p>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...