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

動的 CSS 操作: JavaScript でのクラス定義の変更と削除

実行時に CSS クラスを追加することは JavaScript ではよく知られた手法ですが、既存のクラス定義を変更および削除する機能も同様に重要です。この記事では、CSS クラス定義を動的に変更および削除する手法を検討し、開発者が Web ページの外観をリアルタイムで変更できるようにします。

CSS クラス定義の変更

CSS クラスでは、実行時に CSSStyleSheet.cssRules プロパティを利用でき、スタイルシート内のすべての CSS ルールの配列を返します。この配列をループすることで、特定のルールの識別と変更が可能になります。

たとえば、.menu クラスのフォント サイズ ルールを変更するには、次のコードを使用できます:

const stylesheet = document.styleSheets[0];
const ruleIndex = stylesheet.cssRules.findIndex(rule => rule.selectorText === '.menu');
if (ruleIndex !== -1) {
  stylesheet.cssRules[ruleIndex].style.setProperty('font-size', '10px', null);
}

CSS クラス定義の削除

CSS クラス定義の削除は、変更するよりも若干簡単です。 CSSStyleSheet.deleteRule() メソッドを使用すると、cssRules 配列内のインデックスによって特定のルールを削除できます。

.menu クラス定義を削除するには、次のコードを使用できます:

const stylesheet = document.styleSheets[0];
const ruleIndex = stylesheet.cssRules.findIndex(rule => rule.selectorText === '.menu');
if (ruleIndex !== -1) {
  stylesheet.deleteRule(ruleIndex);
}

これらの技術を活用することで、開発者は Web ページの外観を動的に操作できるようになり、高度にインタラクティブでカスタマイズ可能なユーザーを提供できます。体験してください。

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