こんにちは、さち です。
先日、ウェブサイトの編集をしていたのですが、JavaScript を使って要素の「クラス」を追加・削除したいことがありました。
よく使う方法なのに、すぐに記述や使い方を忘れてしまいます……。
そこで今回は、ピュア（Vanilla） JavaScript でクラスを操作する方法について、まとめていきます。備忘録です。
サンプルコード
例として、こんな感じの HTML を用意しました。要素 <div> は target という「id」と、one two three という3つの「クラス」を持っています。
<div id="target" class="one two three"></div>
クラスを操作する前準備として、JavaScript を使って、この要素を div という変数として取得しておきます。
let div = document.querySelector('#target');
クラスを操作する方法
追加する（add）
要素に「クラス」を追加します。
// four というクラスを追加
div.classList.add('four');
// 複数のクラス（four, five, six）をまとめて追加
div.classList.add('four', 'five', 'six');
// 配列を使ってクラス（four, five, six）をまとめて追加
let classes = ['four', 'five', 'six'];
div.classList.add(...classes);
削除する（remove）
要素が持っている「クラス」を削除します。
// one というクラスを削除
div.classList.remove('one');
// 複数のクラス（one, two, three）をまとめて削除
div.classList.remove('one', 'two', 'three');
// 配列を使ってクラス（one, two, three）をまとめて削除
let classes = ['one', 'two', 'three'];
div.classList.remove(...classes);
クラスを持っているか調べる（contains）
要素が指定した名前の「クラス」を持っているかどうか調べます。持っていれば true 、持っていなければ false が返ってきます。
// seven というクラスを持っているか調べる
let bool = div.classList.contains('seven');
// クラスを持っていれば true、持っていなければ false になる
console.log(bool);
削除／追加の切り替え（toggle）
要素が、指定した名前の「クラス」を持っていれば削除、持っていなければ追加します。スイッチのオン／オフや、要素の表示／非表示をしたいときに使うと便利なメソッドです。
// number というクラスを削除／追加する
div.classList.toggle('number');
// 戻り値を受け取る場合
let bool = div.classList.toggle('number');
// クラスを追加したときは true、削除したときは false になる
console.log(bool);
クラスを追加したときは true 、削除したときは false が返ってきますが、トグルするだけなら無視してOKです。
クラスを置き換える（replace）
要素が指定した名前の「クラス」を持っている場合、別の名前のものに置き換えます。
// two というクラスを double に置き換える
div.classList.replace('two', 'double');
置き換えに成功したときは true 、失敗したときは false が返ってきますが、置き換えたいだけなら無視してOKです。
その他
classList は、「DOMTokenList」という配列に似たオブジェクトです。length プロパティや forEach() メソッドを使用できます。
// 持っているクラスの数
div.classList.length;
// 取得したクラス名を順番にすべて取り出す
div.classList.forEach( classname => {
console.log(classname);
});
「クラス」がなければ length の値は 0 になるので、「クラス」を1つ以上持っているかどうかの判別としても使えます。
コメント