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
