jsでcssスタイルを設定するにはどうすればよいですか? jsでCSSスタイルを変更する方法

js で CSS スタイルを設定するにはどうすればよいですか?この記事ではjsでcssのスタイルを設定（変更）する方法を紹介します。困っている友人は参考にしていただければ幸いです。

JavaScriptを使用してCSSスタイルを設定する方法を紹介します。

1. スタイルを直接設定する (インライン スタイル)

JavaScript を使用して要素のスタイルを設定する最も簡単な方法は、スタイル属性。 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) 線 (background-color) は属性名を表します

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

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

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

2. グローバル スタイルを追加します

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

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

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

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