読者です 読者をやめる 読者になる 読者になる

【JavaScript】classListとclassNameを使用したclass属性の操作について

スポンサーリンク

JavaScript で HTML の class 属性を操作する方法についてです。

classList

element.classListを使用すると要素に紐付いた class 属性のリストを返し、以下のようなメソッドを使用することができます。

メソッド 概要
add 要素のクラスリストにクラスを追加
remove 要素のクラスリストからクラスを削除
toggle 要素のクラスリスト中の特定クラスの切替
contains 要素のクラスリストが特定クラスを含むか否かの確認

 element.classList - Web API インターフェイス | MDN

ただし実際のところclassListで返されるオブジェクトはDOMTokenListです。そのため上記のメソッドも classList のメソッドというよりは DOMTokenList のメソッドになります。

var ele = document.querySelector('#content');
var clazz = ele.classList;
Object.prototype.toString.call(clazz);
> "[object DOMTokenList]"

取得したクラスリストはlengthでリストの長さを取得したり、list[1]またはlist.item(1)のようにインデックスでアクセスすることも可能です。クラス属性が存在しない場合は長さ 0 のリストが返ります。

// 対象の要素 : <div id="content" class="center clear"></div>
element.length;  // 2
element[0];  // "center"
element.item(1);  // "clear"
var none = document.querySelector('#hogehoge').classList;  // []
none.length;  // 0

 DOMTokenList - Web APIs | MDN
 DOMTokenList - DOM Standard

各メソッドの補足

addメソッドは要素のクラスリストにクラスを追加します。復数追加したい場合はカンマ区切りで第2引数以降に渡します。

element.classList.add("1st");  // ["1st"]
element.classList.add("2nd", "3rd");  // ["1st", "2nd", "3rd"]

removeメソッドは要素のクラスリストからクラスを削除します。復数削除したい場合はカンマ区切りで第2引数以降に渡します。

element.classList.remove("1st");  // ["2nd", "3rd"]
element.classList.remove("2nd", "3rd");  // []

containsメソッドは要素のクラスリストに特定のクラスを含むか否かを判定します。第2引数以降を指定しても判定はされません。

element.classList.add("1st", "2nd", "3rd");
element.classList.contains("2nd");  // true
element.classList.contains("4th", "3rd");  // false

toggleメソッドは要素のクラスリスト中の特定クラスの切替ます。既にクラスが存在している場合は削除し、存在しない場合は追加されます。また、第2引数にtrueを指定した場合は強制的にaddメソッドに、falseを指定した場合はremoveメソッドと同じ挙動をとります。

element.classList.toggle("2nd");  // 戻り値は false / ["1st", "3rd"]
element.classList.toggle("4th");  // 戻り値は true / ["1st", "3rd", "4th"]
element.classList.toggle("2nd", true);  // 戻り値は true / ["1st", "3rd", "4th", "2nd"]
element.classList.toggle("3rd", false);  // 戻り値は false / ["1st", "4th", "2nd"]

className

似たようなメソッドでelement.classNameがあります。このメソッドも要素の class 属性の値の取得と設定に用いることができます。ただし、クラスが復数存在した場合はスペース区切りの文字列で操作しなければいけないため、使い勝手はclassListの方がいいです。クラスの追加ということができないため変更する場合は上書きする形になります。

element.className;  // "1st 2nd 3rd"
element.className = "4th 5th";
element.className;  // "4th 5th"
element.className = "1st 2nd 3rd " + element.className;
element.className;  // "1st 2nd 3rd 4th 5th"

 element.className - Web API インターフェイス | MDN