JavaScript 経由で CSS のスタイルを設定する方法

Web 開発では、CSS スタイルの設定は非常に一般的な操作です。 JavaScript は DOM 操作を通じて CSS スタイルを設定できます。この記事ではJavaScriptでCSSスタイルを設定する方法を紹介します。

1. 要素を取得してスタイルを設定する

JavaScript を通じて CSS スタイルを設定するには、まずスタイルを設定する要素を取得する必要があります。取得方法は多数ありますが、ID が「demo」の要素を例に挙げると、次のコードを使用できます:

var demo = document.getElementById("demo");

要素を取得した後、要素のスタイルを通じて CSS スタイルを設定できます。属性。たとえば、要素の背景色を赤に設定するには、次のコードを使用できます。

demo.style.backgroundColor = "red";

同様に、style 属性を使用して、サイズ、境界線、フォント、テキストの色などを設定できます。 CSS スタイル属性名を変換するだけで済みます キャメルケースで名前を付け、その属性値をスタイル属性に割り当てるだけです。たとえば、要素の境界線の幅を 1 ピクセルに設定し、境界線の色を青に設定するには、コード

demo.style.borderWidth = "1px";
demo.style.borderColor = "blue";

2 を使用します。classList オブジェクトを使用してスタイル

## を設定します。 #要素の style 属性を使用して CSS を設定することに加えて、スタイルに加えて、classList オブジェクトを使用してスタイルを設定することもできます。 classList オブジェクトは、要素のクラス属性を操作してスタイルの追加、削除、切り替えなどの機能を実現するための add、remove、toggle などのメソッドを提供します。

たとえば、「highlight」という名前のクラスを要素に追加するには、次のコードを使用できます。

demo.classList.add("highlight");

「highlight」という名前のクラスを削除するには、次のコードを使用できます。 ##

demo.classList.remove("highlight");

「highlight」という名前のクラスを切り替えるには、次のコードを使用できます:

demo.classList.toggle("highlight");

3. CSSStyleSheet オブジェクトを通じてスタイルを設定します

JavaScript では、CSS スタイルシートはオブジェクト、つまり CSSStyleSheet オブジェクトとしても表されます。 CSS スタイルは、CSSStyleSheet オブジェクトを通じて設定することもできます。 CSSStyleSheet オブジェクトでスタイルを設定するには、まず操作対象のスタイルシートを取得する必要があります。取得方法は多数ありますが、ID が「styleSheet」のスタイルシートを例にすると、次のコードのようになります。

var styleSheet = document.getElementById("styleSheet").sheet;

スタイルシートを取得した後、insertRule メソッドを使用してスタイルルールをスタイルシートに追加します。たとえば、新しいスタイル ルールをスタイル シートに追加して要素の背景色を緑色にするには、次のコードを使用できます。

styleSheet.insertRule("#demo {background-color: green;}", 0);

ここの 2 番目のパラメータは、スタイル ルールが適用される位置を示していることに注意してください。が挿入されます。0 はスタイル シートの先頭に挿入を意味し、-1 はスタイル シートの末尾に挿入を意味します。

CSSStyleSheet オブジェクトは、スタイル ルールを挿入するだけでなく、スタイル ルールを削除する deleteRule メソッドも提供します。たとえば、スタイル シートの最初のスタイル ルールを削除するには、次のコードを使用できます:

styleSheet.deleteRule(0);

IV. まとめ

上記の紹介を通じて、CSS スタイルの操作方法を理解できます。 JavaScript 経由。要素の style 属性、classList オブジェクト、および CSSStyleSheet オブジェクトの使用を含みます。もちろん、これは JavaScript のスタイルに関しては氷山の一角にすぎず、習得し学習する必要がある高度な使用法やテクニックがたくさんあります。

以上がJavaScript 経由で CSS のスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。