この記事では、JavaScript を使用してボディに特定のクラスがあるかどうかを確認する方法を示します。
JavaScript を使用して Body に特定のクラスがあるかどうかを確認する方法は?
JavaScript を使用してボディに特定のクラスがあるかどうかを確認するには、次の方法を適用します。
- 「 クラスリスト 「プロパティと」 含む() ' 方法。
- 「 getElementsByTagName() ' と ' マッチ（） 」メソッド。
- 「 jQuery 」。
それぞれのアプローチを1つずつ説明しましょう！
アプローチ 1: classList プロパティと contains() メソッドを使用して、JavaScript で Body に特定のクラスがあるかどうかを確認する
「 クラスリスト ” プロパティは、要素の CSS クラス名を指定します。一方、「 含む() 」 メソッドは、ノードが子孫である場合に true を返します。これらのメソッドを組み合わせて適用すると、関連付けられた要素に含まれるクラスにアクセスできます。
構文
ノード。 含む ( 裸 )
上記の構文では:
- 「 裸 」は、関連付けられたノードの子孫ノードに対応します。
例
以下に示す例の概要を見てみましょう。
< 中心 >< 体 クラス = '含む' >
< h2 > これはLinuxhint Webサイトです h2 >
中心 > 体 >
< スクリプトの種類 = 「テキスト/ジャバスクリプト」 >
もしも ( 資料。 体 . クラスリスト . 含む ( '含む' ) ) {
コンソール。 ログ ( 「ボディ要素にはクラスがあります」 ) ;
}
そうしないと {
コンソール。 ログ ( 「ボディ要素にクラスがありません」 ) ;
}
脚本 >
上記のコードに示されているように、以下の手順を適用します。
- まず、「 <本体> ”set属性を持つ要素” クラス 」。
- また、特定の要素 ( ) 内に見出しを追加します。
- JS コードで、「 クラスリスト 」プロパティと「 含む() ' 方法。
- これにより、関連付けられた「 <本体> 」メソッドのパラメーターで指定されたクラス名に基づく要素。
- 条件が満たされると、「 もしも 」条件が実行されます。
- 逆に、「 そうしないと 」 ステートメント コード ブロックが実行されます。
出力
上記の出力では、特定のクラスが「 <本体> ' エレメント。
アプローチ 2: getElementsByTagName() および match() メソッドを使用して、JavaScript で Body に特定のクラスがあるかどうかを確認します。
「 getElementsByTagName() 」メソッドは、特定のタグ名を持つすべての要素のコレクションを提供します。 「 マッチ（） 」メソッドは、指定された値を文字列と照合します。これらのメソッドを利用して、タグによって必要な要素にアクセスし、特定のクラスをチェックできます。
構文
資料。 getElementsByTagName ( 鬼ごっこ )提供された構文では:
- 「 鬼ごっこ 」は要素のタグ名を表します。
例
次の例は、説明した概念を示しています。
< 画像ソース = 「テンプレート2.png」 身長 = 「150px」 幅 = 「150px」 >
中心 > 体 >
< スクリプトの種類 = 「テキスト/ジャバスクリプト」 >
させて 得る = 資料。 getElementsByTagName ( '体' ) [ 0 ] . クラス名 . マッチ ( /を含む/ )
もしも ( 得る ) {
コンソール。 ログ ( 「ボディ要素にはクラスがあります」 ) ;
}
そうしないと {
コンソール。 ログ ( 「ボディ要素にクラスがありません」 ) ;
}
脚本 >
上記のコード スニペットでは、次のようになります。
- 同様に、「 <本体> 」指定されたクラスを持つ要素。
- また、前の手順で指定した要素内に設定されたサイズの画像を含めます。
- JavaScript コード行で、「 <本体> 」要素をそのタグで「 getElementsByTagName() ' 方法。
- 「 [0] 」は、前のステップで指定されたタグに対応する最初の要素がフェッチされることを示します。
- 「 クラス名 ”プロパティと” マッチ（） 」メソッドは、「 <本体> ' エレメント。
- 「」の以前のステートメント もしも 」 条件は、前の手順のすべての条件が満たされると実行されます。
- そうしないと、後者のステートメントが表示されます。
出力
上記の出力は、特定のクラスの適用条件が満たされていることを示しています。
アプローチ 3: jQuery を使用して JavaScript で Body に特定のクラスがあるかどうかを確認する
このアプローチを実装して、必要な要素に直接アクセスし、そのメソッドの助けを借りて特定のクラスを簡単に見つけることができます。
例
以下の例を見てみましょう。
< 中心 >< 体 クラス = 「含む」 >
< テキストエリアのプレースホルダー = 「任意のテキストを入力してください...」 > テキストエリア >
中心 > 体 >
もしも ( $ ( '体' ) . hasClass ( 「含む」 ) ) {
アラート ( 「ボディ要素にはクラスがあります」 )
}
そうしないと {
アラート ( 「ボディ要素にクラスがありません」 )
}
脚本 >
上記のコード行では:
- 「」を含めます jQuery 」ライブラリの機能を活用します。
- 同様に、「 <本体> 」 宣言されたクラスを持つ要素。
- また、「 <テキストエリア> 」要素を、前の手順で指定した要素内に配置します。
- JS コードで、「 <本体> ' エレメント。また、「 hasClass() 」メソッドを使用して、フェッチされた要素で指定されたクラスを検索します。
- これにより、結果として、条件が満たされたときに以前のメッセージが警告されます。
- それ以外の場合は、後者のステートメントが表示されます。
出力
上記の出力は、目的の要件が達成されたことを意味します。
結論
「 クラスリスト 「プロパティと」 含む() 」メソッド、「 getElementsByTagName() ' と ' マッチ（） 」メソッド、または「 jQuery 」を使用して、JavaScript を使用してボディに特定のクラスがあるかどうかを確認できます。これらのアプローチを利用して、対応する要素を直接参照するか、そのタグによって、または jQuery メソッドを使用して、要素内の特定のクラスを検索できます。このブログでは、JavaScript で body に特定のクラスがあるかどうかを確認する方法を説明しました