• JavaScript

【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要素に指定したクラスが付与されているか存在をチェックする方法について紹介しました。

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