Unable to lookup elements' CSS properties when CSS file loaded manually

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.

You also cannot access the stylesheet rules programmatically since it's from different domain... in case you wanted to do that. — Esailija
– Esailija, Commented Aug 19, 2012 at 15:30

Pointy · Accepted Answer · 2012-08-19 15:26:56Z

4

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.

answered Aug 19, 2012 at 15:26

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Max Corbeau Over a year ago

Indeed it works. However I thought DOM modifications (i.e. when using methods such as append, prepend and the likes) where synchronous?

Pointy Over a year ago

The DOM is modified immediately, but an HTTP transaction must take place to fetch the stylesheet. (Even if it's cached, the browser may handle it asynchronously.) It's like adding an <img> tag to the document.

Community · Accepted Answer · 2017-05-23 12:20:08Z

2

Likely the problem is due to the stylesheets not being fully loaded by the time you do your console.logs. Similar to dynamically rendering an image to the page with jquery, a stylesheet is a foriegn resource, and you need to account for the time it takes for the browser to pull down and apply the stylesheet before you can execute code that leverages.

A better approach to this problem (and a solution) can be found here: jQuery event that triggers after CSS is loaded?

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Aug 19, 2012 at 15:32

Mitchell Lee

4563 silver badges14 bronze badges

Collectives™ on Stack Overflow

Unable to lookup elements' CSS properties when CSS file loaded manually

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related