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

Question

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

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

这是我的js：

function stychange(){
  if (button.value=="off"){
   button.value="on";
   document.body.style.backgroundColor="#00FF00";
  document.getElementById('ad').style.borderStyle="double";
}

  else {
   button.value="off";}

}

Answer 1

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

​

document.getElementById('stybut').addEventListener('click', function() {
  this.classList.toggle('changed');
});

#stybut { background : #00FF00; border: 2px double red }
#stybut.changed { background : red; border: 2px double green }

<button type="button" name="stybut" id="stybut">Style Change</button>

​