このマニュアルでは、JavaScript でアクティブ クラスを追加する手順について説明します。
JavaScript でアクティブ クラスを追加する方法は?
アクティブなクラスを追加するには、次のメソッドを使用します。
最初の方法に行きましょう！
方法 1: document.getElementById() を classList.add() メソッドとともに使用して、JavaScript でアクティブなクラスを追加する
JavaScript では、「 document.getElementById() 」メソッドは、ID によって特定の要素にアクセスするために使用されます。ただし、クラスではなく、ID に基づいて要素のみを選択します。 「 classList.add() 」 JavaScript でアクティブなクラスを追加するメソッド。
例を挙げて、この方法を調べてみましょう。
例
HTML ファイルでは、「 」タグにテキストを付け、その ID を「 TXT 」、「 オンクリック 」をトリガーするイベント「 活性化（） ' 関数。
タグ内にタグを追加することに注意してください。
< ピッド ID = 'TXT' オンクリック = '活性化（）' > ここをタップ p >JavaScript ファイルで、まず document.getElementbyId() メソッドで ID を使用して段落要素にアクセスするように activate() 関数を定義します。次に、スタイル設定のために CSS クラスをクラス リストに追加します。
機能活性化 ( ) {
があります = 資料。 getElementById ( 'TXT' ) ;
を。 クラスリスト . 追加 ( 「ニュークラス」 ) ;
}
CSS ファイルでは、「」の前にドットを配置します。 ニュークラス 」を割り当て、「 背景色 ”プロパティ値” オレンジ 」：
. ニュークラス {バックグラウンド - 色 : オレンジ ;
}
その結果、段落要素をクリックすると、追加された背景プロパティが適用されます。
document.querySelector() を使用してアクティブなクラスを追加する次のメソッドを見てみましょう。
方法 2: document.querySelector() を classList.add() メソッドとともに使用して、JavaScript でアクティブなクラスを追加する
JavaScript では、「 document.querySelector() 」メソッドを使用して、コードから最初の要素を取得します。クラスと ID の両方を querySelector() メソッド内で指定できます。 「 classList.add() 」 JavaScript でアクティブなクラスを追加するメソッド。
例
ここでは、「 document.querySelector() ” ID付き “ ＃TXT 」を押して段落要素を選択します。ここでも、classList.add() メソッドを使用して、アクティブな「 ニュークラス 」：
機能活性化 ( ) {があります = 資料。 クエリセレクター ( '＃TXT' ) ;
を。 クラスリスト . 追加 ( 「ニュークラス」 ) ;
}
出力
JavaScript でアクティブなクラスを追加する最も簡単な方法を 2 つ学びました。
結論
アクティブなクラスを追加するには、「 getElementById() ' また ' querySelector() 」 classList.add() メソッドで。上記の両方のメソッドは、最初に ID で要素を取得し、次に classList.add() メソッドを使用して、スタイル設定に使用できる要素に割り当てられた新しいクラス名を取得します。この投稿では、JavaScript でアクティブなクラスを追加する手順について説明しました。