Javascriptの勉強をしていて便利だなと思ったclassListについて書いていきます。
classListとは
指定した要素のクラス名を追加、削除などが行えます。
classListに用意されているメソッド
| メソッド名 | 構文 | 詳細 |
|---|---|---|
| add | add(class1, class2, …) | 1つまたは複数のクラスを要素に追加できます。 |
| contains | contains(class) | 要素にすでにクラス名が含まれているか確認できます。Boolean値を返します。 |
| item | item(index) | 要素のインデックス番号にあるクラス名を戻します。 |
| remove | remove(class1, class2, …) | 1つまたは複数のクラスを要素から削除できます。 |
| toggle | toggle(class) | 要素にクラスがあれば削除、なければ追加します。 ※オプションもありますが省略 |
それではサンプルコードを見ながらclassListを学んでいきたいと思います。
開発者ツールで見るとクラスの変化が分かりやすいと思います。
クラスを追加する (add)
クラスAにcssでbackground-colorでskyblueを設定しています。
ボタンを押すとbtnCtr()が実行されdivにクラスAが追加されクラスC(background-color:#dddddd)を上書きし背景色が変化します。
サンプルコード
See the Pen classList add by Nakamoto (@programmerlife) on CodePen.
Javascript抜粋
function btnCtr(){
//丸のid取得
let circle = document.getElementById(“circle”);
//クラス追加
circle.classList.add(“A”);
}
サンプルコードでは1つのクラスを追加しましたが、以下のように複数指定できます。
classList.add(“A”, “B”, “C”)
クラスを削除する (remove)
クラスAにcssでbackground-colorでskyblueを設定しています。
ボタンを押すとbtnCtr()が実行されdivにありクラスAが削除されクラスCの背景色が適用されます。
サンプルコード
See the Pen classList remove by Nakamoto (@programmerlife) on CodePen.
Javascript抜粋
function btnCtr(){
//丸のid取得
let circle = document.getElementById(“circle”);
//クラス追加
circle.classList.remove(“A”);
}
テストでは1つのクラスを削除しましたが、以下のように複数指定できます。
classList.remove(“A”, “B”, “C”)
クラスがあれば削除、なければ追加 (toggle)
ボタンをクリックするとAクラスがあれば削除、なければ追加します。何回でもクリックができて楽しい。
サンプルコード
See the Pen classList toggle by Nakamoto (@programmerlife) on CodePen.
Javascript抜粋
function btnCtr(){
//丸のid取得
let circle = document.getElementById(“circle”);
//クラス追加
circle.classList.toggle(“A”);
}
〇番目のクラスを知る (index と length)
あまり使いかたがわかりませんが、indexメソッドで〇番目にインデックスされているクラスを知ることができます。
0番目始まりです。
サンプルコード
少しわかりづらいですが、consoleにclassListのlengthと1番目のitemが出力されます。
ボタンは上記のtoggleのままです。
See the Pen classList item by Nakamoto (@programmerlife) on CodePen.
Javascript抜粋
function btnCtr(){
//丸のid取得
let circle = document.getElementById(“circle”);
//丸のidに付随するクラス名を取得
//let circleClass = circle.getAttribute(“class”);
//クラス追加
circle.classList.toggle(“A”);
//circleの持つクラスの数
console.log(circle.classList.length);
//1番目のクラスをコンソールへ出力
console.log(circle.classList.item(1));
}
ついでにlengthでcircleのもっているクラスの数もコンソールで出力させています。
また1番目のindexがない場合はnullが返されます。
クラスがあるか (contains)
指定したクラスがあるかないか判定します。
true/falseが返ってきます。
サンプルコード
consoleにクラスAが含まれるためtrueが返されます。
See the Pen classList contains by Nakamoto (@programmerlife) on CodePen.
Javascript抜粋
function btnCtr(){
//丸のid取得
let circle = document.getElementById(“circle”);
//丸のidに付随するクラス名を取得
//let circleClass = circle.getAttribute(“class”);
//クラス追加
console.log(circle.classList.contains(“A”));
}
おわり
クラスの追加と削除ができるようになるだけでできることが増える気がして嬉しいですね。
参考サイト：https://www.w3schools.com/jsref/prop_element_classlist.asp
