jQuery で動的にロードされたインラインまたは外部 CSS を適用する jQuery を使用して AJAX 経由で HTML コンテンツをロードする場合、特定の CSS を含める必要がある場合があります。適切なレンダリングのためのスタイル。ただし、動的に追加された CSS は、挿入時にブラウザによって評価されない場合があります。 動的 CSS インジェクションのオプション CSS を動的に挿入するには、いくつかの方法があります。 DOM: インラインStyleSheet を動的に作成します。要素を作成し、それを <head> に追加します。セクション:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var myCSS = 'body { background-color: red; }'; $('<style type="text/css">').html(myCSS).appendTo('head');</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>外部スタイルシート</strong></p> <p>jQuery の $.get() メソッドを使用して外部 CSS ファイルを読み込みます:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$.get('myStyles.css', function(css) { $('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head'); });</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>動的に<リンク>を作成タグ</strong></p> <p><リンク> を作成します。要素を動的に取得し、<head> に追加します。セクション:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>スタイルを動的に作成<スタイル> @import を使用</strong></p> <p>動的に作成された <style> 内で @import を使用します。 element:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var myCSS = '@import url("myStyles.css")'; $('<style type="text/css">').html(myCSS).appendTo('head');</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>サポートされているブラウザ</strong></p> <p>Internet Explorer は動的に追加されたときにインライン CSS を評価しますが、Chrome では外部 CSS を評価するために @import を使用する必要があります。 Firefox の動的 CSS インジェクションのサポートはバージョンによって異なる場合があります。</p>
