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初心者向け】配列要素を追加・上書き・削除する方法

2022.08.22
3869
JavaScript

【簡単】JavaScriptを使って任意の文字列を置換する方法

更新日:2022.09.09
1009
JavaScript

JavaScriptでマウスが要素をhoverしたか判定する方法

2022.11.10
3207
JavaScript

【JavaScript】キーボードで入力したキー値を取得する方法

2023.01.23
1488