JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで要素が特定のクラスを持っているか判定する方法

要素が特定のクラスを含んでいるかどうかを確認するには、hasClass() メソッドを使用します。このメソッドは、要素の className プロパティに対象のクラス名が含まれているかをチェックし、含まれていれば true、含まれていなければ false を返します。

hasClass() の基本的な実装例

以下のコードでは、<div> 要素が「myClass」というクラスを持っているかどうかを判定しています。クラス名の前後に半角スペースを付けて検索することで、「myClass2」のような部分一致を防ぎ、正確に判定できるのがポイントです。

<html>
   <body>
      <div id="test" class="myClass"></div>
      <script>
         function hasClass(element, cls) {
            return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
         }
         var val1 = document.getElementById('test');
         alert(hasClass(val1, 'myClass'));
      </script>
   </body>
</html>

コードの解説

  • element.className: 要素に設定されているすべてのクラス名を文字列として取得します。
  • indexOf(): 指定した文字列が最初に現れる位置を返します。見つからない場合は -1 を返すため、結果が -1 より大きければクラスが存在すると判断できます。
  • alert(): 判定結果（true / false）をアラートダイアログで表示します。

よりモダンな方法：classList.contains()

現在のブラウザでは、classList API の contains() メソッドを使うのが一般的でおすすめです。コードがシンプルになり、可読性も向上します。

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

if (element.classList.contains('myClass')) {
  console.log('myClass が存在します');
} else {
  console.log('myClass は存在しません');
}

classList.contains() は Internet Explorer を除く主要なすべてのブラウザでサポートされており、複数クラスの追加・削除・切り替えなども簡単に行えるため、特別な理由がない限りこちらの利用を推奨します。

  1. JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

    JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in