静的 CSS ファイルを使用せずに、jQuery で CSS ルールを動的に生成および適用するにはどうすればよいですか?

jQuery を使用した動的 CSS ルールの生成

問題:

CSS ファイルでは、多くの場合 CSS ルールの静的な定義が必要です。静的 CSS ファイルを使用せずに、再利用可能な CSS ルールを実行時に動的に作成するにはどうすればよいですか?

解決策:

jQuery を使用すると、

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

例:

静的 CSS ルール #my-window を作成するには、 HTMLのhead要素に続くdocument:

$("<style type="text/css"> #my-window { position:fixed; z-index:102; display:none; top:50%; left:50%; } </style>").appendTo("head");

Usage:

この方法で CSS ルールを定義した後、addClass() メソッドを使用して DOM 要素に適用できます:

$("element-to-style").addClass("my-window");

この方法により、別個の CSS を必要とせずに、再利用可能な CSS ルールを簡単に作成して適用できます。ファイル。

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