时间戳

首页 > 解决方案 > 根据布尔值更改几个CSS

javascript - 根据布尔值更改几个CSS

问题描述

我正在创建一个页面，该页面会根据一天中的当地时间发生变化。如果是晚上有另一个背景图像，颜色不同等等。我做了一些更改，document.getElementById();但是对于每个元素来说这将花费太长时间。

我在想，是否有一种基于布尔结果执行多个 css 代码的捷径。我试图寻找类似的东西，@input css但找不到更多。

编辑：我实际上的意思是“是否有一种捷径可以从不同的 div 和 id 更改几个 css 代码”。例如：color:of#message会根据一天中的时间而有所不同

标签： javascripthtmlcss

解决方案

使用 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>

推荐阅读