JavaScript を使用して CSS ルールセットを動的に変更するにはどうすればよいですか?

JavaScript からの CSS ルール セットの変更

CSS ルール セットを動的に操作するのは難しい場合があります。ただし、ウィジェットのクリックなど、ユーザーのアクションに基づいてページ要素を変更する場合は、その方法を理解することが重要です。

JavaScript 経由で CSS ルールセットの変更を開始するには、次の手順に従います。

1.ルールセットを見つけます:

変更する要素を管理する特定の CSS ルールセットを特定します。

2. Document.styleSheets を使用します:

ドキュメント オブジェクトの styleSheets プロパティにアクセスします:

var styleSheet = document.styleSheets[0]; // selects the first stylesheet

3.ルール セットにアクセスします:

変更するルール セットのインデックスを指定します:

var rule = styleSheet.cssRules[index]; // where index represents the specific rule-set

4.ルールを変更します:

ルール オブジェクトの style プロパティを使用してルール プロパティを更新します:

rule.style.setProperty('color', 'red');

例:

検討次の CSS ルールセット:

.element {
  color: blue;
}

すべての要素の色を変更するにはウィジェットがクリックされたときに .element クラスを赤にするには、次の JavaScript を使用できます:

document.querySelector('.widget').addEventListener('click', function() {
  var styleSheet = document.styleSheets[0];
  var rule = styleSheet.cssRules[0]; // assumes the CSS rule-set is the first one
  rule.style.setProperty('color', 'red');
});

ブラウザの互換性:

このアプローチは互換性があることに注意してください。 Firefox、Internet Explorer、Chrome などの最新のブラウザ。

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