【javascript】押したら色が付くtoggleボタン【CSS】

ボタンを押したら色が付くtoggleボタンコード

toggleやら何やらで色々試して見たんですがおそらくjavascript系のフレームワークならどれでも使えるんじゃないかな・・と。
サンプルコードはvueで書かれていますがreact,angularが読める方は読めると思います。

See the Pen ActiveColorChangeButton by Yishida (@yishida05) on CodePen.

解説

onClickでjavascript内の関数を呼び出し

     
      document.getElementById('testButton').classList.toggle("Button-style-default")
      document.getElementById('testButton').classList.toggle("Button-style-" + cssName)

この２行でcssに当てるためのclassをつけたり消したりしています。
classList.toggleで引数がclassList内に存在しなければ追加、存在していれば削除を行っています。
１度押したら付けっぱなしにするにはclassList.addを使う・・・
など他にも関数が用意されているので詳しくは
https://developer.mozilla.org/ja/docs/Web/API/DOMTokenList