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

JavaScript入門