TTIL

2022-01-04 JS で class を追加・削除・トグル

JS で 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");

まとめるとこの3つ。

  • classList.remove("x");
  • classList.add("x");
  • classList.toggle("x");