jQuery を使用して AJAX コンテンツにインラインまたは外部 CSS を動的に適用するにはどうすればよいですか?

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

jQuery を使用して Ajax コンテンツをページに統合する場合、適用される CSS を管理する必要がありますその内容に。この記事では、インライン CSS を適用する方法、または外部 CSS スタイルシートを動的にロードして、ロードされたコンテンツを適切に表示する方法について説明します。

問題

を使用して Ajax コンテンツを Yahoo ポップアップにロードするjQuery の .get メソッドにより、動的に生成された CSS が適用される際に問題が発生します。 Chrome は DOM に追加された CSS をインラインで評価しませんが、Internet Explorer は評価します。インラインまたは外部として動的にロードされた CSS を評価する方法を見つけることが重要です。

ソリューション

jQuery には、CSS を動的にロードして評価するためのメソッドがいくつか用意されています。

インライン 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 の動的読み込みと評価が可能になり、読み込まれたコンテンツの適切なスタイル設定とユーザーへの表示が保証されます。

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