Javascript 如何使用js按钮切换样式更改？

我想有一个按钮，切换我的网站上的风格变化，但风格不会改变回第二次点击。这是我的html：

<button type="button" onclick="stychange()" name="stybut" id="stybut" value="off" >Style Change </button>

---

设置一个类，然后切换该类，这就是切换样式的方式

document.getElementById（'stybut'）.addEventListener（'click'，function（）{
this.classList.toggle（'changed'）；
});
#stybut{背景：#00FF00；边框：2px双红}
#stybut.changed{背景：红色；边框：2px双绿色}
样式更改
设置一个类，然后切换该类，这就是切换样式的方式


document.getElementById（'stybut'）.addEventListener（'click'，function（）{
this.classList.toggle（'changed'）；
});
#stybut{背景：#00FF00；边框：2px双红}
#stybut.changed{背景：红色；边框：2px双绿色}
Style Change
样式不会更改，因为您没有在
else{}
块中编写任何代码来更改样式。样式不会更改，因为您没有在
else{}
块中编写任何代码来更改样式。好的，如果我试图用同一个按钮更改多个元素的样式，我应该把所有的样式都放在修改过的类中？就像我想用按钮来修改页面的字体颜色、大小、背景和边框样式一样。这样一个类就完美了，而不是用JavaScription来修改每一种样式，所以也许我可以创建一个类来替代body&然后把所有的新样式都放在那里？当然，如果这就是你想要的？好吧，那么如果我试图用同一个按钮更改多个元素的样式，我应该将所有样式都放在已更改的类中？就像我希望按钮更改页面的字体颜色、大小、背景和边框样式一样。那么类就完美了，与其用Javascript改变每一种样式，不如让我创建一个类来替代body&然后把所有的新样式都放进去？当然，如果你想要的话？
function stychange(){
  if (button.value=="off"){
   button.value="on";
   document.body.style.backgroundColor="#00FF00";
  document.getElementById('ad').style.borderStyle="double";
}

  else {
   button.value="off";}

}