jQuery を使用して動的 CSS ルールを作成および再利用するにはどうすればよいですか?

jQuery を使用した動的 CSS ルールの作成と再利用

CSS を使用する場合、多くの場合、CSS ファイル内で静的ルールを定義すると便利です。ただし、実行時に CSS 情報を動的に追加したい場合もあります。この記事では、jQuery を使用して再利用可能な CSS ルールを作成し、特定の DOM 要素に複数の追加を行う必要をなくす方法について説明します。

実行時の CSS ルールの作成

To create a CSS Rule at Runtime

1. jQueryを使用して動的にCSSルールを作成すると、次のことが可能になります。手順:

   <style type="text/css"></style>

HTML マークアップを使用してスタイル要素を作成します:

2. .redbold {
    color: #f00;
    font-weight: bold;
   }

スタイル要素内で CSS ルールを定義します:

3. $("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");

スタイル要素をドキュメントの先頭:

作成したルールの再利用

<div class="redbold">SOME NEW TEXT</div>

$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

CSS ルールを作成したら、適切なルールを適用して再利用できます。クラスからHTMLへ要素:

互換性

CSS ルールを作成および再利用するこの方法は、Opera 10、Firefox などのブラウザーでテストされ、動作することが確認されています。 3.5、Internet Explorer 8、および Internet Explorer 6.

以上がjQuery を使用して動的 CSS ルールを作成および再利用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。