概要：このチュートリアルでは、JavaScriptのclassListプロパティを使用して、要素のCSSクラスを操作する方法を学びます。
JavaScript classListプロパティの紹介
classListは、要素の読み取り専用プロパティで、CSSクラスのライブコレクションを返します。
const classes = element.classList;Code language: JavaScript (javascript)classListは、要素のclass属性の内容を表すDOMTokenListオブジェクトです。
classListは読み取り専用ですが、さまざまなメソッドを使用して、含まれているクラスを操作できます。
JavaScript classListの例
classListのインターフェースを介して要素のCSSクラスを操作する例をいくつか見てみましょう。
1) 要素のCSSクラスを取得する
mainとredの2つのクラスを持つdiv要素があるとします。
<div id="content" class="main red">JavaScript classList</div>Code language: HTML, XML (xml)次のコードは、コンソールウィンドウにdiv要素のクラスリストを表示します。
let div = document.querySelector('#content');
for (let cssClass of div.classList) {
console.log(cssClass);
}Code language: JavaScript (javascript)出力
main
red仕組み
- まず、
querySelector()メソッドを使用して、IDがcontentのdiv要素を選択します。 - 次に、
classListの要素を反復処理し、コンソールウィンドウにクラスを表示します。
2) 要素のクラスリストに1つ以上のクラスを追加する
要素のクラスリストに1つ以上のCSSクラスを追加するには、classListのadd()メソッドを使用します。
たとえば、次のコードは、IDがcontentのdiv要素のクラスリストにinfoクラスを追加します。
let div = document.querySelector('#content');
div.classList.add('info');Code language: JavaScript (javascript)次の例では、要素のクラスリストに複数のCSSクラスを追加します。
let div = document.querySelector('#content');
div.classList.add('info','visible','block');Code language: JavaScript (javascript)3) 要素のクラスを削除する
要素のクラスリストからCSSクラスを削除するには、remove()メソッドを使用します。
let div = document.querySelector('#content');
div.classList.remove('visible');Code language: JavaScript (javascript)add()メソッドと同様に、一度に複数のクラスを削除できます。
let div = document.querySelector('#content');
div.classList.remove('block','red');Code language: JavaScript (javascript)4) 要素のクラスを置き換える
既存のCSSクラスを新しいクラスに置き換えるには、replace()メソッドを使用します。
let div = document.querySelector('#content');
div.classList.replace('info','warning');Code language: JavaScript (javascript)5) 要素に指定されたクラスがあるかどうかを確認する
要素に指定されたクラスがあるかどうかを確認するには、contains()メソッドを使用します。
let div = document.querySelector('#content');
div.classList.contains('warning'); // trueCode language: JavaScript (javascript)contains()メソッドは、classListに指定されたクラスが含まれている場合はtrueを返し、そうでない場合はfalseを返します。
6) クラスを切り替える
要素のクラスリストに指定されたクラス名が含まれている場合、toggle()メソッドはそれを削除します。クラスリストにクラス名が含まれていない場合、toggle()メソッドはそれをクラスリストに追加します。
次の例では、toggle()メソッドを使用して、IDがcontentの要素のvisibleクラスを切り替えます。
let div = document.querySelector('#content');
div.classList.toggle('visible');Code language: JavaScript (javascript)まとめ
- 要素の
classListプロパティは、要素のCSSクラスのライブコレクションを返します。 add()メソッドとremove()メソッドを使用して、要素のクラスリストにCSSクラスを追加したり、CSSクラスを削除したりします。replace()メソッドを使用して、既存のクラスを新しいクラスに置き換えます。contains()メソッドを使用して、要素のクラスリストに指定されたクラスが含まれているかどうかを確認します。toggle()メソッドを使用して、クラスを切り替えます。
