この記事では、JavaScript で CSS を追加する方法について説明します。
JavaScript で CSS を追加する方法は?
JavaScript では、次の方法またはアプローチを使用して style プロパティを変更することにより、要素に CSS スタイルを追加できます。
- インライン スタイリングとしての style プロパティ
- インライン スタイリングとしての setAttribute() メソッド
- グローバルスタイリングとしての createElement() メソッド
方法 1: 「style」プロパティを使用して JavaScript で CSS を追加する
JavaScript で CSS を追加するには、「 スタイル ' 財産。要素のインライン スタイルにアクセスして操作するために使用されます。要素のインライン スタイルを表すオブジェクトを提供し、個々のスタイル プロパティを取得または設定できるようにします。
構文
JavaScript で CSS スタイルを追加するには、「 スタイル ' 財産：
エレメント。 スタイル ;
ここ、 ' エレメント 」は HTML 要素への参照です。
例
次の例では、JavaScript を使用してボタンのスタイルを設定します。まず、3 つのボタンを作成し、それらに ID を割り当てます。これにより、スタイリングのためにボタン要素にアクセスするのに役立ちます。
< ボタン ID = 「btn2」 > 拒絶 ボタン >
< ボタン ID = 「btn3」 > 受け入れる ボタン >
スタイリング前の出力は次のようになります。
それでは、「 スタイル ' 財産。まず、「 getElementById() ' 方法：
同意する = 書類。 getElementById ( 「btn1」 ) ;拒否させて = 書類。 getElementById ( 「btn2」 ) ;
受け入れましょう = 書類。 getElementById ( 「btn3」 ) ;
「を使用して、これらすべてのボタンの背景色を設定します スタイル ' 財産：
同意。 スタイル . 背景色 = '緑' ;拒絶。 スタイル . 背景色 = '赤' ;
受け入れる。 スタイル . 背景色 = '黄色' ;
ご覧のとおり、ボタンは「 スタイル ' 財産：
方法 2: 「setAttribute()」メソッドを使用して JavaScript で CSS を追加する
JavaScript で CSS スタイルを追加するには、「 setAttribute() ' 方法。属性とその値を HTML 要素に設定または追加するために使用されます。
構文
次の構文は、「 setAttribute() ' 方法：
例
ここでは、「 setAttribute() ' 方法。すべてのボタンの境界線の半径を「 .5レム 」、「 同意 ' と ' 拒絶 」へのボタン 白 」。
拒絶。 setAttribute ( 'スタイル' 、 '背景色: 赤; 色: 白; 境界半径: .5rem;' ) ;
受け入れる。 setAttribute ( 'スタイル' 、 '背景色: 黄色; 境界線の半径: .5rem;' ) ;
出力
方法 3: 「createElement()」メソッドを使用して JavaScript で CSS を追加する
CSS スタイリングのように JavaScript スタイリングでクラスまたは ID を作成する場合は、「 createElement() ' 方法。新しい要素を動的に作成するために使用されます。スタイリングのために「 スタイル 」要素をこのメソッドを使用して。 「 createElement('スタイル') JavaScript の ” メソッドは、Web ページに CSS スタイルを追加するために使用できる新しいスタイル要素を動的に作成するために使用されます。
構文
指定された構文は、「 createElement() ' 方法：
JavaScript で CSS スタイルを追加するには、次の構文を使用します。
定数 スタイル = 書類。 createElement ( 'スタイル' ) ;次に、以下の構文を使用して head タグに style 要素を追加します。
書類。 頭 . appendChild ( スタイル ) ;ここ、 ' スタイル 」は、新しく作成されたスタイル要素への参照であり、「 document.head 」は HTML 文書の head 要素です。
例
まず、「 createElement() ' 方法：
今、「 ボタン 「すべてのボタンと ID に同じスタイルを適用するためのクラス」 ボタン1 」、「 ボタン2 ' と ' ボタン3 」 個々のボタンのスタイリング:
スタイル。 インナーHTML = `. ボタン {
フォント - サイズ : 1.1レム ;
パディング : 3px ;
マージン : 2px ;
フォント - 家族 : それなし - セリフ ;
国境 - 半径 : .5レム ;
}
#btn1 {
バックグラウンド - 色 : 緑 ;
色 : 白 ;
}
#btn2 {
バックグラウンド - 色 : 赤 ;
色 : 白 ;
}
#btn3 {
バックグラウンド - 色 : 黄色 ;
}
` ;
ここで、「 appendChild() ' 方法：
書類。 頭 . appendChild ( スタイル ) ; 出力
以上で、JavaScript に CSS を追加することができます。
結論
JavaScript で CSS を追加するには、「 スタイル 」プロパティ、および「 setAttribute() 」メソッド、または「 createElement() ' 方法。アプリケーションのスタイルを維持することが難しくなり、コードの繰り返しにつながる可能性があるため、インライン メソッドは推奨されませんが、グローバル スタイルはより効率的です。この記事では、JavaScript で CSS を追加する方法について説明しました。