ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript で CSS クラス定義を動的に変更または削除するにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-12-15 09:52:11
オリジナル
409 人が閲覧しました

How Can I Dynamically Modify or Remove CSS Class Definitions in JavaScript?

CSS クラス定義を動的に変更または削除する方法

JavaScript を使用して実行時に新しい CSS クラス定義を追加することは可能ですが、変更する機能はまたは既存のものを削除することも重要です。

CSS を変更するクラス プロパティ

.menu クラスのフォント サイズ ルールを変更して、それを使用するページ上の要素に影響を与えられるようにするには、次の手順を実行します。

  1. document.styleSheets を使用してスタイルシートの配列を取得します。
  2. スタイルシートごとに、 cssRules 配列。
  3. selectorText プロパティを使用して、.menu クラスに対応するルールを見つけます。
  4. style.setProperty('font-size','10px',null) メソッドを使用して、ルールの font-size プロパティを更新します。

削除CSS クラス定義

.menu クラス定義を削除するには、次の手順を実行します。

  1. 前のセクションの手順 1 と 2 を繰り返します。
  2. selectorText プロパティを使用して、.menu クラスに対応するルールを見つけます。
  3. deleteRule() メソッドを使用してスタイルシートからルールを削除します。 stylesheet.deleteRule(index)、index は cssRules 配列内のルールのインデックスです。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート