JavaScriptでCSSを設定する方法

JavaScript で CSS を設定する方法: 1. インライン スタイルを通じてスタイル オブジェクトを直接設定します; 2. グローバル スタイルを追加してスタイル属性を設定します; 3. JavaScript を使用してクラス「add()」とクラスを追加および削除します「remove()」でCSSを設定します。

この記事の動作環境: Windows7 システム、javascript1.8.5&&HTML5&&CSS3 バージョン、Dell G3 コンピューター。

JavaScript は CSS スタイルを設定します

1. スタイル オブジェクトを直接設定します (インライン スタイル)

JavaScript を使用して要素のスタイルを設定する最も簡単な方法は、次のとおりです。 style 属性を使用します。 JavaScript を通じてアクセスするすべての HTML 要素にスタイル オブジェクトがあります。このオブジェクトを使用すると、CSS プロパティを指定し、その値を設定できます。たとえば、これは、ID 値デモを使用して HTML 要素のフォントの色、背景色、スタイルを設定するスタイルです:

var myElement = document.querySelector("#demo");
// 把颜色设置成紫色
elem.style.color = 'purple';  
// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';  
// 将高度设置为150 px
elem.style.height = '150px';

注: JavaScript では、代わりにキャメル ケースの原則 (たとえば、backgroundColor) が使用されます。ダッシュ (背景色) 属性名を表します

style 属性は要素にスタイルをインラインで追加します:

<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">     
     Hello, world! 
</div>

ただし、これによりマークアップが非常に混乱する可能性があります。ブラウザのレンダリングパフォーマンスも悪いです。

2. style 属性を設定します -- グローバル スタイルを追加します

もう 1 つの方法は、 の CSS 属性を持つ要素を DOM に挿入することです。これは、1 つの要素だけではなく要素のグループに適用するスタイルを設定する場合に便利です。

まず、スタイル要素を作成します。

var style = document.createElement('style');

次に、innerHTML を通じてスタイルを