我如何切换样式变化与一个按钮与js

How do I toggle a style change with a button with js?

本文关键字：一个 js 按钮 何切换 样式 变化      更新时间：2023-09-26

我想在我的网站上有一个切换样式更改的按钮，但样式不会在第二次点击时更改。这是我的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";}
}

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

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>

相关文章：