Written by Kasumi

【JavaScript】HTML要素に指定したクラスが付与されているか存在をチェックする方法

HTML要素に指定したクラスが付与されているか存在をチェックしたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

クラスが付与されているか存在をチェック

<div id="section" class="wrap info"></div>

<script>
  const div = document.querySelector("div");

  if (div.classList.contains("wrap")) {
    console.log("wrapクラスが存在する");
  } else {
    console.log("wrapクラスが存在しない");
  }
</script>

クラスの存在をチェックするコード例です。

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

クラスの存在チェックにはclassListプロパティcontainsメソッドを使います。

if文の条件式で指定したHTML要素とclassListプロパティを連結しクラスを参照。

containsメソッドを連結。

containsメソッドの引数存在をチェックしたいクラス名を入れます。

引数に指定した文字列(クラス名)が含まれていればif文でtrueを返します。

以上で実装完了です。

まとめ

JavaScriptでHTML要素に指定したクラスが付与されているか存在をチェックする方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptで経過ミリ秒を取得。単位を秒・分に変換する方法

2023.01.19
169
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
827
JavaScript

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

更新日:2022.09.09
293
JavaScript

JavaScriptで参照先オブジェクトからthisが渡らない時の対処方法

2022.12.10
388