初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

【JavaScript】特定のクラスの有無を判定する方法【classList】

【JavaScript】classの有無 特定のclassが付与されているか判別する方法!

指定したタグに、特定のクラスが付与されているかどうかを判別する方法を紹介します。

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。

それでは本文へ、レッツゴー!

クラスの有無を判定する方法

指定したタグに、特定のクラスが付与されているかどうかを判別する方法は、classList.containを使います。

要素.classList.contains('クラス名')

クラスが付与されていればtrue、されていなければfalseが返ってきます。

他のclassListの使い方と同様、クラス名部分に.(ドット)は不要なので注意しましょう。

classListは、主にクラスを付与したり削除したりする際に使います。
詳しい使い方についてはこちらから

サンプルコード

<p class="yeah">いぇあ</p>

<script>
    const p = document.querySelector('p')
    console.log(p.classList.contains('yeah'));
</script>