JavaScript: classListで簡単にクラスを追加・削除する
JavaScriptでクラスを追加・削除する場合は、classList を使用すると 簡単に実現できます。
書式
// 追加
elem.classList.add('クラス名');
// 削除
elem.classList.remove('クラス名');
// 追加・削除
elem.classList.toggle('クラス名');
クラスを追加する場合は add()、削除する場合は remove()を使います。 toggle()を使用すると、指定したクラスがない場合は追加、すでにある場合は削除してくれます。
従来の「elem.className = 'クラス名'」だと、新規で設定する場合はいいのですが、 追加や削除のときは不便です。
classList を利用した方法だと、JQueryのaddClass()、やremoveClass()と同じように、 簡単に追加・削除が実現できます。
サンプルコード
次のコードでは、classList.add()、classList.remove()、 classList.toggle()を使って、クラスの追加や削除を行っています。
HTML
<div id="start" class="a"></div>
JavaScript
var d = document.getElementById('start');
console.log(start.className); // a
// 'b' を追加
d.classList.add('b');
console.log(start.className); // a b
// 'a' を削除
d.classList.remove('a');
console.log(start.className); // b
// toggle 'c'
d.classList.toggle('c');
console.log(start.className); // b c
// toggle 'c'
d.classList.toggle('c');
console.log(start.className); // b