Question

在HTML中。现在我知道我们可以要求CSS在用户更改系统配色方案时做一些事情，例如

@media (prefers-color-scheme: dark)

但是，如果我想覆盖该设置，如晚上需要浅色方案，但又不想更改系统颜色方案设置，有什么JavaScript或jQuery方式可以愚弄CSS（进行深色处理）怎么办？即使在系统光线较暗或相反的情况下也可以停放，所以我可以通过单击某些元素来切换网页配色方案？

Answer 1

您应该首先以24小时格式获取当前时间，例如：

var dayNight = (new Date()).getHours();

现在，您很可能拥有2种具有背景色的类，其中1种是白天，而1种是夜晚。

因此，您可以使用if/else语句来决定何时要使用JQuery添加或删除类。

因此，在我的示例中，当.dayNight大于或等于7（上午7点）并且小于19（下午7点）时，它将添加.day类并删除。night课。

当.dayNight大于或等于0（午夜12点）并且小于7（上午7点）时，它将添加.night类，并删除.day类

此外，当它大于或等于19（晚上7点）并且小于或等于23（晚上11点）时，它也会执行相同的操作。在上面的代码中我们已经将0（午夜12点）分配了，因此我们可以在此处将其设置为23（晚上11点）。

尝试一下：

var dayNight = (new Date()).getHours();

if(dayNight>=7 && dayNight < 19) {
  $( "#display" ).removeClass( "night" ).addClass( "day" );
}

if((dayNight>=0 && dayNight<7) || (dayNight>=19 && dayNight <=23)) {
	$( "#display" ).removeClass( "day" ).addClass( "night" );
}

.day {
  background-color: blue;
  color: white;
}

.night {
  background-color: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display">
Hello!
</div>

如何覆盖CSS配色方案设置

1 个答案: