Question

I am loading a CSS stylesheet after page load with this code:

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

Although this works fine (i.e. elements with classes from the newly added stylesheet are properly decorated), I am unable to query the CSS properties from that stylesheet using jQuery: I have created a jsFiddle to show the problem

How can I (ideally with jQuery) lookup the CSS properties of elements which classes correspond to CSS stylesheets added after page load?

PS: I am experiencing the issue with Firefox 14.0.1 but not with Chrome 21.0.1180.79.

Answer 1

If you do your console.log() calls in a “load” handler, it works fine:

$("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'));    
      }
  }));

Fiddle, updated.