所以基本上我想为我的网站制作一个暗模式切换器。我有一个小脚本开始。它基本上切换 CSS 样式。但如果我离开或刷新页面，样式将不会明显保留...
<style>
.mystyle {
color:red !important;
background-color: black !important;
}
</style>
<script>
function init(){
var element = document.body;
element.classList.toggle("mystyle");
}
</script>
所以我的目标是让这个切换按钮在整个站点中保持当前状态，即使在刷新或更改页面后也是如此......
最佳答案
一个简单的方法是将状态保存在 localStorage 中，并在加载页面时根据其值切换类。
以下是您可以如何实现它:
<style>
.dark-mode {
color: red;
background-color: black;
}
</style>
<body>
<button onclick="toggleMode()">Switch Mode</button>
</body>
<script>
const body = document.body;
if (localStorage.mode === 'dark') {
body.classList.add("dark-mode")
};
function toggleMode() {
body.classList.toggle("dark-mode");
localStorage.setItem(
'mode', localStorage.mode === 'light' || localStorage.mode === undefined ? 'dark' : 'light'
);
}
</script>关于javascript - 如何使用单个脚本更改多个元素的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56119517/