jsのボタンでスタイルの変更を切り替えるにはどうすればよいですか？

Question

サイトのスタイルの変更を切り替えるボタンが必要ですが、スタイルは2回目のクリックで変更されません。これは私の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>

スタイルを切り替える方法を説明します