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.09.09
583
JavaScript

【Webpack-Dev-Server】HTMLファイルを保存してもブラウザが自動リロードされない原因・対処方法

2023.01.14
1248
JavaScript

【JavaScript】初回アクセスのみ任意の処理を実行する方法

2022.12.18
2533
JavaScript

JavaScriptで異なる配列を同じ関数に渡して処理を使い回す方法【applyメソッドが便利】

2022.12.11
1197