jQuery を使用してインラインまたは外部 CSS を動的にロードするにはどうすればよいですか?

jQuery で動的にロードされたインラインまたは外部 CSS を適用する

jQuery を使用して AJAX 経由で HTML コンテンツをロードする場合、特定の CSS を含める必要がある場合があります。適切なレンダリングのためのスタイル。ただし、動的に追加された CSS は、挿入時にブラウザによって評価されない場合があります。

動的 CSS インジェクションのオプション

CSS を動的に挿入するには、いくつかの方法があります。 DOM:

インラインStyleSheet

var myCSS = 'body { background-color: red; }';
$('<style type="text/css">').html(myCSS).appendTo('head');</style>

外部スタイルシート

jQuery の $.get() メソッドを使用して外部 CSS ファイルを読み込みます:

$.get('myStyles.css', function(css) {
  $('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');
});

動的にを作成タグ

を作成します。要素を動的に取得し、

に追加します。セクション:

$('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');

スタイルを動的に作成 @import を使用

動的に作成された

var myCSS = '@import url("myStyles.css")';
$('<style type="text/css">').html(myCSS).appendTo('head');</style>

サポートされているブラウザ

Internet Explorer は動的に追加されたときにインライン CSS を評価しますが、Chrome では外部 CSS を評価するために @import を使用する必要があります。 Firefox の動的 CSS インジェクションのサポートはバージョンによって異なる場合があります。

以上がjQuery を使用してインラインまたは外部 CSS を動的にロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。