要素にクラスが含まれているか確認する

要素にクラスが含まれているかどうかを確認するには、要素のclassListプロパティのcontains()メソッドを使用します。

element.classList.contains(className);Code language: CSS (css)

このメソッドでは、classNameを要素のclassListプロパティのcontains()メソッドに渡します。要素にclassNameが含まれている場合、メソッドはtrueを返します。そうでない場合は、falseを返します。

たとえば、secondaryとinfoの2つのクラスを持つ次の<div>要素があるとします。

<div class="secondary info">Item</div>Code language: HTML, XML (xml)

<div>要素にsecondaryクラスが含まれているかどうかを確認するには、次のコードを使用します。

const div = document.querySelector('div');
div.classList.contains('secondary'); // trueCode language: JavaScript (javascript)

この例では、querySelector()メソッドを使用してdivを選択し、contains()メソッドを使用して、そのクラスリストにsecondaryクラスが含まれているかどうかを確認します。

次の例は、<div>要素にerrorクラスがないため、falseを返します。

const div = document.querySelector('div');
div.classList.contains('error'); // falseCode language: JavaScript (javascript)

まとめ

• 要素に特定のクラス名が含まれているかどうかを確認するには、element.classList.contains()メソッドを使用します。