JavaScript を使用して CSS クラス定義を動的に変更および削除するにはどうすればよいですか?

CSS クラス定義の動的変更と削除

実行時に CSS クラスを追加することは既知の JavaScript 操作ですが、その機能を変更または削除に拡張します。既存のクラス定義は難しく思えるかもしれません。この記事では、これらの操作をプログラムで実現する方法を検討することで、この課題に対処します。

CSS クラス定義の変更

CSS クラス定義を編集するには、次の手順に従います。

1. 次を使用してドキュメントのスタイルシートにアクセスします。 document.styleSheets.
2. 各スタイル シートの cssRules プロパティをループして、変更するルールを見つけます。
3. ルールが見つかったら、setProperty を使用してスタイル プロパティを更新します。

たとえば、.menu のフォント サイズを変更するにはclass:

let styleSheet = document.styleSheets[0];
let rule = styleSheet.cssRules[1]; // Assuming ".menu" is the second rule
rule.style.setProperty('font-size', '15px');

CSS クラス定義の削除

CSS クラス定義を削除するには、次の手順に従います。

1. スタイルを見つけます前のセクションで説明したように、シートとルールを作成します。
2. ルールをシートから削除します。 deleteRule.

を使用した cssRules コレクション。たとえば、.menu クラス定義を削除するには:

let styleSheet = document.styleSheets[0];
let rule = styleSheet.cssRules[1]; // Assuming ".menu" is the second rule
stylesheet.deleteRule(1);

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