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