この記事では、classList.toggle()を使って、クラスの有無を切り替えます。
classListに関する他の記事は下記で紹介しています。
classList.toggle()
使い方
element.classList.toggle('クラス名')と使います。
element（クラス名をチェックする対象）にクラス名があれば、クラス名を除去し、クラス名がなければ追加します。
デモ
「toggle実行」のボタンをクリックするとイベントが発火し、クラス名の有無をチェックします。
サンプルコード
<div id="target">ターゲット</div>
<button onclick="actionToggle();">toggle実行</button>function actionToggle() {
var target = document.getElementById('target');
target.classList.toggle('apple');
}.apple {
color: red;
}「toggle実行」をクリックすると、HTMLは下記の2つで交互に切り替わります。
<!-- appleあり -->
<div id="target" class="apple">ターゲット</div>
<!-- appleなし -->
<div id="target" class="">ターゲット</div>