【JavaScript】HTML 要素のクラスの追加・削除

JavaScriptでHTML要素のクラスを追加・削除するにはclassListを使用する。
#クラスの追加
■書き方

[取得した要素].classList.add('クラス名');

#クラスの削除
■書き方

[取得した要素].classList.remove('クラス名');

#クラスの有無で追加or削除
■書き方

[取得した要素].classList.toggle('クラス名');

#サンプルコード

example.html

<div id="example" class="a"></div>

example.js

// 要素を取得
var example = document.getElementById('example');

// 'b' を追加
example.classList.add('b');
//　結果　<div id="example" class="a b"></div>

// 'a' を削除
example.classList.remove('a');
// 結果　<div id="example" class="b"></div>

// toggle 'c' 
example.classList.toggle('c');
// 結果　<div id="example" class="b c"></div>

// toggle 'c' 
example.classList.toggle('c');
// 結果　<div id="example" class="b"></div>

#参照
MDN web docs