• HOME > 
  • JavaScript > 
  • JSで要素が特定のクラスを持つか調べる【classList....

JSで要素が特定のクラスを持つか調べる【classList.contains】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

JSで要素が特定のクラスを持つか調べるには?

JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。

「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「classList.remove()」というようにメソッドと一緒に使ってクラスの付与や削除といった処理を行うことができます。

classList.contains()の使い方

classList.contains()は下記のように引数に調べたいクラス名を記述して使用します。

調べたいクラスが含まれていれば「true」、含まれていなければ「false」を返します。

classList.contains()の使い方

下の例は、要素が「hogehoge」というクラスと「fugafuga」というクラスを持っているかを調べています。

「hogehoge」の方は含まれているのでtrueが返ってきますが、「fugafuga」の方は無いのでfalseが返されます。

HTML

<div id="test" class="hogehoge">テスト</div>

JavaScript

var test = document.getElementById("test");

var res1 = test.classList.contains("hogehoge");
var res2 = test.classList.contains("fugafuga");

console.log(res1);//結果はtrue
console.log(res2);//結果はfalse

containsで条件分岐を作ってクラスのつけ外しを行う例

実際にclassList.containsを使う例として、クリックイベントでクラスのつけ外しを行い要素の背景色を切り替える処理を作ってみます。

クラスのつけ外しを行い要素の背景色を切り替える

あらかじめCSSでクラスがある時とない時をセレクターにしたスタイルを用意しておきます。

ボタンに記述したonclick属性で、クリックされたらJSの処理を呼び出します。

HTML

<div id="test">テスト</div>
<button onclick="changeBg()">切り替え</button>

CSS

#test{
    background:#000033;
    color:#fff;
}
#test.active{
    background:#bf0000;
}

JavaScriptで、classList.containsで要素が「active」というクラスを持っているか判定し、クラスが含まれていなければ「add」を使って付与、クラスが含まれていたら「remove」で削除するようにします。

JavaScript

function changeBg(){
    var test = document.getElementById("test");
    var active = test.classList.contains("active");
    if(active !== true){//クラスが含まれていないとき
        test.classList.add("active");
    }else{//クラスが含まれているとき
        test.classList.remove("active");
    }
}

実は上記のようなクラスの付け外し処理であれば、同じくclassListに用意されている「toggle()」メソッドを使った方がより簡単に記述できます。

「classList.toggle()」についてはこちらのページにまとめています。

まとめ

以上が、JavaScriptの「classList.contains()」を使って要素が特定のクラスを持つか調べる方法です。

JavaScriptによる要素の動的なスタイル変更には「classList」を使うことがほとんどだと思いますので、「contains」をはじめ「add」「remove」「toggle」といったクラス操作の方法をしっかり理解しておきたいですね。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。