ホームページ >ウェブフロントエンド >CSSチュートリアル >Chrome AJAX スタイルの問題を修正するために、jQuery でインラインまたは外部 CSS を動的に適用するにはどうすればよいですか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-15 12:49:39552ブラウズ

How Can I Dynamically Apply Inline or External CSS in jQuery to Fix Chrome AJAX Styling Issues?

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");<p><strong>動的に作成された外部 CSS の読み込み<style></strong></p>
<pre class="brush:php;toolbar:false">$('<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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。