JavaScript6, Jsからhtmlにクラスを追加する,classList,add,remove, toggle,初心者向け

6,クラスの切り替え

Jsからhtmlにクラスを追加する
JS（JavaScript）コーディングでよく使う、クラスの切り替えについて説明しています。
classListのadd, remove, toggleを使い分けて、様々な処理ができるようになりましょう！

document.getElementById("test").addEventListener("click", function() {
  document.getElementById("test").classList.add("test2");
})
↓
document.getElementById("test").addEventListener("click", function() {
  this.classList.add("test2");
})

document.getElementById("test").classList.add("test2");
ここのクラスにtest2を追加する

this.classList.add("test2");
今イベントが起きてる要素ならthisで代用できる

this.classList.remove("test2");
.removeは逆でその要素を取り除く

this.classList.toggle("test2");
ついてる時に取って、ついてない時に付ける