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 を通じてスタイルを