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

CSS クラス定義の動的変更

CSS クラス定義をその場で変更することは、動的 Web アプリケーションにとって不可欠な機能となる可能性があります。新しいクラスの追加は簡単に実行できますが、既存の定義の変更または削除には別の課題が生じます。

CSS クラス ルールの変更

クラスのフォント サイズ ルールを変更するには".menu" クラス:

// Get the stylesheet index
const sheetIndex = document.styleSheets.length - 1;

// Get the CSS rule object
const rule = document.styleSheets[sheetIndex].cssRules[0];

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

これは、 ".menu" class.

CSS クラス定義の削除

".menu" クラス定義を完全に削除するには:

// Get the stylesheet index
const sheetIndex = document.styleSheets.length - 1;

// Remove the rule from the stylesheet
document.styleSheets[sheetIndex].deleteRule(0);

これは「.menu」クラス定義をスタイルシートから削除すると、それを使用しているすべての要素でそのスタイルが失われます。

注: すべてのブラウザが CSS 操作機能の全範囲をサポートしているわけではないため、これらの手法を使用する場合はブラウザの互換性を念頭に置くことが重要です。

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