Chrome AJAX スタイルの問題を修正するために、jQuery でインラインまたは外部 CSS を動的に適用するにはどうすればよいですか?

jQuery を使用してインラインまたは外部 CSS を動的に適用する

jQuery を使用して Ajax コントロールを Yahoo ポップアップに動的にロードし、独自の CSS を適用したいと考えています。それにはCSSを使用します。インライン スタイルシートまたは外部スタイルシートの 2 つのオプションがあります。ただし、Chrome では、標準メソッドを使用して DOM に追加されるときに、AJAX 経由でロードされた CSS が評価されないことがわかりました。

この問題を解決するために、jQuery は動的に追加されたスタイルシートを評価または適用するためのいくつかのアプローチを提供します。 DOM へ:

インライン CSS の読み込み

使用AJAX:

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});   

動的に作成された外部 CSS の読み込み

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

動的に作成された外部 CSS の読み込み

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

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

これらのソリューションはポップアップで CSS を効果的に読み込んで適用するため、Ajax で読み込まれたコンテンツの個別のスタイルを維持できるようになります。

以上がChrome AJAX スタイルの問題を修正するために、jQuery でインラインまたは外部 CSS を動的に適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。