javascript - 如何使用 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>