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

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

実行時に CSS クラス定義を操作すると、Web 要素の外観を動的に制御できます。これは、特定の条件やユーザー設定に基づいてユーザー エクスペリエンスをカスタマイズする場合に役立ちます。

CSS クラス定義の変更

既存の CSS クラス定義を変更するには、document.styleSheets プロパティを使用して、スタイルシートルールにアクセスします。各ルールは、rule.style プロパティを使用して更新できます。

たとえば、.menu クラスのフォント サイズを 10px に変更するには:

// Get the stylesheet
const stylesheet = document.styleSheets[0];

// Find the .menu rule
const rule = Array.from(stylesheet.cssRules).find(r => r.selectorText === '.menu');

// Change the font size
rule.style.setProperty('font-size', '10px', null);

CSS クラス定義の削除

CSS クラス定義を削除するには、document.styleSheets の deleteRule メソッドを使用できます。 object.

たとえば、.menu クラス定義を削除するには:

stylesheet.deleteRule(stylesheet.cssRules.length - 1); // Assuming .menu is the last rule

または、ルールの表示プロパティを none に設定して、そのクラスを使用する要素を効果的に非表示にすることもできます。

rule.style.setProperty('display', 'none', null);

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