JavaScript で class を追加・削除・トグル

classList API を使うとよい。

Element.classList - Web API | MDN

const div = document.createElement('div');
div.className = 'foo';

// 最初の状態: <div class="foo"></div>
console.log(div.outerHTML);

// classList API を用いてクラスを除去、追加
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// visible が設定されていれば除去し、なければ追加
div.classList.toggle("visible");

まとめるとこの３つ。

• classList.remove("x"); クラスから x を削除
• classList.add("x"); クラスに x を追加
• classList.toggle("x"); クラスに x をトグルする

特定クラスを含んでいるかをチェック

const div = document.createElement('div');
div.classList.contains("foo")