JavaScript は CSS ルールセットを動的に変更できますか?

JavaScript を使用した CSS ルール セットの操作

質問:

JavaScript を使用して CSS ルール セットを動的に変更できますか? Web 上の同じクラスを持つ複数の要素のスタイルを変更するなどpage?

答え:

JavaScript を使用してこのような CSS 変更を行うことは可能ですが、そのプロセスにはいくつかの複雑さが伴います。このための包括的なガイドは、「Javascript を使用した Totally Pwn CSS」の記事にあります。

前述の変更を実装するには、次の手順に従います。

1. 次を使用してルールセットにアクセスします。 DOM メソッド。
2. 必要に応じてルールセットのプロパティを変更します。
3. 更新されたプロパティを再適用します。

実装:

Firefox および IE: 以下のコードは、以下の環境で機能することがテストされています。ブラウザ:

// Access the rule-set
var styleSheet = document.styleSheets[0]; // assuming there's only one
var ruleSet = styleSheet.cssRules[0]; // assuming there's only one

// Modify the rule-set
ruleSet.style.color = "red";

// Reapply the updated rule-set
stylesheet.insertRule(ruleSet.cssText, 0);

Chrome: Chrome のアップデートにより、前述の DOM メソッドのサポートが利用可能になりました。

以上がJavaScript は CSS ルールセットを動的に変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。