JavaScriptでCSSのクラスを簡単に操作するclassListの使い方

Webページの動的な振る舞いを実現するために、JavaScriptを使用してHTML要素のクラスを操作することはよくあります。今回は、そのような操作を簡単に行うことができるclassListプロパティについて詳しく解説します。

クラスを追加する classList.add

最も基本的な操作の一つが、要素に新しいクラスを追加することです。以下の例では、.exampleというクラスを持つ要素にnew-classというクラスを追加しています。

const element = document.querySelector('.example');
element.classList.add('new-class');

この一行のコードで、指定された要素に新しいクラスが追加され、それに対応したスタイルが適用されます。

クラスを削除する classList.remove

次に、要素から特定のクラスを削除する方法です。以下の例では、.exampleクラスを持つ要素からnew-classというクラスを削除しています。

const element = document.querySelector('.example');
element.classList.remove('new-class');

これにより、指定したクラスが要素から削除され、そのクラスに関連付けられたスタイルも同時に削除されます。

クラスをトグルする classList.toggle

classList.toggleメソッドは、指定したクラスが要素に存在する場合はそのクラスを削除し、存在しない場合はそのクラスを追加します。これは、例えばナビゲーションメニューの開閉のような、スイッチのような動作を実装する際に非常に便利です。

const element = document.querySelector('.example');
element.classList.toggle('active');

このコードは、activeクラスの有無をトグル（切り替え）する効果があります。

クラスが存在するかを確認する classList.contains

特定のクラスが要素に存在するかどうかを確認する場合には、classList.containsメソッドを使用します。これは、条件分岐の中で特定のクラスが存在する場合にだけ特定の動作をさせたいときなどに使います。

const element = document.querySelector('.example');
if (element.classList.contains('active')) {
    console.log('The element has the "active" class.');
} else {
    console.log('The element does not have the "active" class.');
}

このコードは、要素がactiveクラスを持っているかどうかを判定し、それに基づいてコンソールにメッセージを出力します。

まとめ

classListプロパティは、DOM要素のクラスの操作をシンプルにしてくれる強力なツールです。複雑な条件分岐や長い文字列操作をせずに、簡潔なメソッドでクラスの追加、削除、トグル、確認が行えます。この機能を使いこなすことで、Webページの動的な振る舞いをよりシンプルに、そして効率的に実装することが可能です。