我正在尝试更改 html 网页的颜色，它工作正常。但是我有几个网页，我希望所有页面的颜色都可以通过按一个按钮来改变，而不仅仅是一个。将有一个设置页面，其中有颜色选项，用户可以通过选择任何颜色来更改所有网页的颜色。
单页变色代码:
$(document).ready(function() {
$(".btn").click(function() {
if ($(".container").hasClass("night")) {
$(".container").removeClass("night");
$(".btn").removeClass("btn-night").text("Night Mode Off");
$(".text").removeClass("text-night");
$(".p-sm").text("Turn on the night mode to change the background to dark.");
} else {
$(".container").addClass("night");
$(".btn").addClass("btn-night").text("Night Mode On");
$(".text").addClass("text-night");
$(".p-sm").text("Night mode is active. Turn off the night mode to change the background to light.");
}
});
});body,
.container {
height: 100vh;
}
.container {
width: 100%;
display: flex;
justify-content: center;
animation-name: daytransition;
animation-duration: 3s;
}
@keyframes daytransition {
from {
background-color: #040018;
}
to {
background-color: #fff;
}
}
.text {
position: absolute;
top: 30%;
font-size: 20px;
text-align: center;
}
.p-lg {
font-size: 28px;
}
.p-sm {
margin: 30px;
}
.night {
animation-name: nighttransition;
animation-duration: 3s;
background-color: #040018 !important;
}
@keyframes nighttransition {
from {
background-color: #fff;
}
to {
background-color: #040018;
}
}
.text-night {
color: #c5b2cc;
}
.btn {
margin: 30px;
background-color: #6f6f8e !important;
color: #FBFFC9 !important;
}
.btn-night {
background-color: #FBFFC9 !important;
color: #6f6f8e !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<body>
<div class="container">
<div class="text">
<p class="p-lg">Demo of Day and Night Themes</p>
<button class="btn btn-lg">Night Mode Off</button>
<p class="p-sm">Turn on the night mode to change the background to dark.</p>
</div>
</div>
</body>
</html>最佳答案
您想在不同页面之间保持状态。您可以使用 session 存储来做到这一点
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
关于javascript - 如何通过javascript一次更改多个网页的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49755645/