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

マウスでホバー出来る端末以外はCSSで装飾した:hoverを無効にする方法【メディアクエリで解決】

2022.12.27
1746
JavaScript

【簡単】videoタグの再生速度を調整(早く・遅く)する方法

更新日:2022.09.09
2524
JavaScript

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

2022.11.10
1266
JavaScript

JavaScriptでHTMLタグに属性を追加する方法

2023.01.08
1498