Javascript 如何使用单个脚本更改多个元素的样式？

所以基本上我想为我的网站做一个暗模式切换。我有一个开始的小脚本。它基本上切换CSS样式。但如果我离开或刷新页面，样式将不会明显保留

<style>
    .mystyle {
        color:red !important;
        background-color: black !important;
    }

</style>

mystyle先生{
颜色：红色！重要；
背景色：黑色！重要；
}

函数init（）{
var元素=document.body；
element.classList.toggle（“mystyle”）；
}

---

因此，我的目标是使此切换按钮在整个站点上保持其当前状态，即使在刷新或更改页面后…

一个简单的方法是将状态保存在中，并在加载页面时根据其值切换类

以下是您可以如何实现它：

.暗模式{
颜色：红色；
背景色：黑色；
}
开关模式
const body=document.body；
if（localStorage.mode==='dark'）{
body.classList.add（“暗模式”）
};
函数toggleMode（）{
body.classList.toggle（“暗模式”）；
localStorage.setItem(
'mode'，localStorage.mode=='light'| | localStorage.mode===未定义的？'dark'：'light'
);
}

尝试使用add（）和remove（）函数删除和添加类，以下代码可能有效：

<script>
  var onOff=false; //to check of the class is active or not
  function init(){ 
  var element = document.body;
  if(onOff === false){
   element.classList.add("mystyle");
   onOff = true;
  }eles{
      element.classList.remove("mystyle");
      onOff = false;
  }
}
</script>

var-onOff=false//检查类是否处于活动状态
函数init（）{
var元素=document.body；
如果（onOff==false）{
element.classList.add（“mystyle”）；
onOff=true；
}埃利斯{
element.classList.remove（“mystyle”）；
onOff=false；
}
}

您需要将状态存储在某个位置。您可以使用cookies或使用本地存储。加载页面时，检查保存状态（通过读取cookie值或本地存储值），并根据其值切换类。你好我是新来的脚本。。。不能让它工作。你能做一个JSFIDLE样本吗？@mojito000，我在答案中添加了一个样本。

<script>
  var onOff=false; //to check of the class is active or not
  function init(){ 
  var element = document.body;
  if(onOff === false){
   element.classList.add("mystyle");
   onOff = true;
  }eles{
      element.classList.remove("mystyle");
      onOff = false;
  }
}
</script>