2

CSS次のコードを使用してページを読み込んだ後、スタイルシートを読み込んでいます。

$("head").append($("<link>", {
    rel: "stylesheet",
    href: 'http://cdn.sstatic.net/stackoverflow/all.css',
    type: "text/css"
}));

これは正常に機能しますが（つまり、新しく追加されたスタイルシートのクラスを持つ要素は適切に装飾されています）、次をCSS使用してそのスタイルシートのプロパティをクエリできませんjQuery：問題を表示するためにを作成しましたjsFiddle

ページの読み込み後に追加されたCSSスタイルシートに対応するクラスの要素jQueryのプロパティを（理想的には）ルックアップするにはどうすればよいですか？CSS

PS：で問題が発生していますが、では発生してFirefox 14.0.1いませんChrome 21.0.1180.79。

4

2 に答える 2

4

console.log()「ロード」ハンドラーで呼び出しを行う場合は、正常に機能します。

$("head").append($("<link>", {
    rel: "stylesheet",
    href: 'http://cdn.sstatic.net/stackoverflow/all.css',
    type: "text/css",
    load: function() {
      console.log($('#test1').css('color'));
      console.log($('#test2').css('color'));
      console.log($('#test3').css('color'));
      console.log($('#test4').css('color'));    
      }
  }));

フィドル、更新。

于 2012-08-19T15:26:56.527 に答える
2

この問題は、console.logsを実行するまでにスタイルシートが完全にロードされていないことが原因である可能性があります。jqueryを使用して画像をページに動的にレンダリングするのと同様に、スタイルシートは外部リソースであり、を活用するコードを実行する前に、ブラウザーがスタイルシートをプルダウンして適用するのにかかる時間を考慮する必要があります。

この問題（および解決策）へのより良いアプローチはここにあります： CSSがロードされた後にトリガーされるjQueryイベント？

于 2012-08-19T15:32:43.107 に答える