JS class 持っているかどうか？

JS class 持っているかどうか？

Webページの要素を操作する際、特定のクラスを持っているかどうかを判定する必要がある場合があります。JavaScriptでは、classListプロパティとcontains()メソッドを使用して、要素が特定のクラスを持っているかどうかを簡単に確認できます。

classList.contains() メソッド

classList.contains() メソッドは、要素のクラスリストに指定されたクラス名が含まれているかどうかを確認するために使用します。このメソッドは、以下の形式で使用します。

element.classList.contains('クラス名')

ここで、element は対象となる要素、'クラス名' は確認したいクラス名です。

contains() メソッドは、対象の要素にクラス名が含まれていれば true を、含まれていなければ false を返します。

使用例

例えば、以下のようなHTMLがあるとします。

<div id="myElement" class="box active"></div>

この要素が "active" クラスを持っているかどうかを確認するには、次のようにします。

const element = document.getElementById('myElement');
const hasActiveClass = element.classList.contains('active');

console.log(hasActiveClass); // true

このコードは、"myElement" というIDを持つ要素を取得し、classList.contains('active') を使用して "active" クラスを持っているかどうかを確認します。この場合、要素は "active" クラスを持っているため、hasActiveClass 変数には true が格納され、コンソールに true と出力されます。

使用例：条件分岐

classList.contains() メソッドの結果に応じて処理を分岐させることもできます。

const element = document.getElementById('myElement');

if (element.classList.contains('active')) {
  // "active" クラスを持っている場合の処理
  element.textContent = 'アクティブです';
} else {
  // "active" クラスを持っていない場合の処理
  element.textContent = '非アクティブです';
}

このコードは、"myElement" というIDを持つ要素が "active" クラスを持っているかどうかによって、要素の内容を変更します。

ブラウザ互換性

classList プロパティと contains() メソッドは、主要なブラウザで広くサポートされています。ただし、古いブラウザではサポートされていない場合があります。古いブラウザをサポートする必要がある場合は、代替手段を検討する必要があるかもしれません。

ブラウザ バージョン
Chrome 8+
Firefox 3.6+
Safari 5.1+
Edge 12+
Opera 11.5+
Internet Explorer 9+

参考資料

  • <a href="https://developer.mozilla.org/ja/docs/Web/API/Element/classList">Element.classList - Web API | MDN</a>

よくある質問

Q1: 複数のクラスを持っているかどうかを確認するにはどうすればよいですか？

A1: classList.contains() メソッドは、一度に1つのクラスしか確認できません。複数のクラスを持っているかどうかを確認するには、それぞれのクラスに対して classList.contains() メソッドを呼び出す必要があります。

Q2: classList.contains() メソッドは、大文字と小文字を区別しますか？

A2: はい、classList.contains() メソッドは大文字と小文字を区別します。クラス名の大文字と小文字が正確に一致していることを確認してください。

Q3: classList プロパティは、どのような要素で使用できますか？

A3: classList プロパティは、HTMLの要素を表すオブジェクト（HTMLElementオブジェクト）で使用できます。例えば、div、span、p などの要素で使用できます。

その他の参考記事:jquery class 削除