How to apply inline and/or external CSS loaded dynamically with jQuery

Question

I have an Ajax control that is loaded into a Yahoo popup using jQuery.

I just use a simple .get request to load the HTML.

  $.get(contentUrl, null, function(response) {
         $('#dialog').find('.bd').assertOne().html(response);
     }, "waitDlg");

Now the problem is that the content that is loaded needs its own CSS which is actually dynamically created. I have a choice of either inlining the or using an external CSS stylesheet.

Testing in Chrome shows that the CSS loaded via AJAX is not evaluated/applied at the time it is added to the DOM using the above code.

Internet Explorer will evaluate an inlined CSS when it just gets stuck in the DOM but Chrome will not. I am currently unable to test in FireFox because of a completely unrelated issue.

Is there any way in jQuery to evaluate a stylesheet that was dynamically added to the DOM as either an inline or ?

There are many reasons I'd like to do this:

the CSS in the popup belongs to the popup and may be coming from a different environment altogether
it is dynamic and I don't want to put it in the parent page unless I absolutely have to
I planned for it to work like this and it doesn't! :-(

Georg Schölly · Accepted Answer · 2009-04-30 06:08:08Z

79

Given a path to your stylesheet (or some URL that will generate valid CSS):

var myStylesLocation = "myStyles.css";

...either one of these should work:

Load using AJAX

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});

Load using dynamically-created <link>

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");

Load using dynamically-created <style>

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

or

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

edited Apr 30, 2009 at 6:08

Georg Schölly

127k54 gold badges225 silver badges277 bronze badges

answered Apr 30, 2009 at 5:07

Shog9

160k36 gold badges237 silver badges242 bronze badges

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

8 Comments

Simon_Weaver Over a year ago

this looks great. AFAYK are these all 'supported' ways of doing this or is this at all hacky? it looks very promising but i'm worried about the one browser that won't let me do this.

Shog9 Over a year ago

They're all valid, but the only way to know for sure if a given browser reacts to the changing DOM correctly is to try it. The last two (thanks, gs!) come with an additional caveat: if your server is misconfigured and sends your CSS down with the wrong MIME type, Firefox will ignore it unless your page is in quirks mode.

Simon_Weaver Over a year ago

works great : $('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >') .appendTo("head");

Simon_Weaver Over a year ago

may not work on IE7. have not verified yet - but please see answer from @user406905

Matthew Lock Over a year ago

Would be cool if StackOverflow has a little popup testing matrix with all the browsers and versions and we could mark which combinations worked for each answer. A bit like this matrix.cpantesters.org/?dist=WWW-Mechanize+1.72

|

user406905 · Accepted Answer · 2015-05-08 18:11:11Z

27

The accepted answer will not work in IE 7 (and buggy in IE 8). the following will work in IE as well as FF and chrome/safari:

var url = 'urlOfStyleSheet.css'
if(document.createStyleSheet) {
    try { document.createStyleSheet(url); } catch (e) { }
}
else {
    var css;
    css         = document.createElement('link');
    css.rel     = 'stylesheet';
    css.type    = 'text/css';
    css.media   = "all";
    css.href    = url;
    document.getElementsByTagName("head")[0].appendChild(css);
}

edited May 8, 2015 at 18:11

answered Jan 21, 2011 at 3:05

user406905

1,41616 silver badges16 bronze badges

3 Comments

Simon_Weaver Over a year ago

thanks! now if i could only remember where i used this so i could go change it

orourkedd Over a year ago

this works in ie8 but not ie7. The accepted answer does not work in either.

Toskan Over a year ago

this works for IE 8 document.createStyleSheet and yes: the other technics seem very buggy with IE 8. They can work, but the bigger the page / the slower the load, it seemed to stop working. document.createStyleSheetworked great so far for me

Rafael Herscovici · Accepted Answer · 2014-07-25 14:36:51Z

1

var cssPath = "/path/to/css/";

var linkStr = document.createElement("&lt;link rel='stylesheet' type='text/css' href='"+cssPath+"' media='screen' /&gt;");

document.getElementsByTagName("head")[0].appendChild(linkStr);

edited Jul 25, 2014 at 14:36

Rafael Herscovici

17.2k19 gold badges68 silver badges94 bronze badges

answered Aug 31, 2009 at 1:30

Toby

1 Comment

Toby Over a year ago

Sorry, meant to add this as a comment to Cris Rus' question.

Collectives™ on Stack Overflow

How to apply inline and/or external CSS loaded dynamically with jQuery

3 Answers 3

Load using AJAX

Load using dynamically-created <link>

Load using dynamically-created <style>

8 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Load using AJAX

Load using dynamically-created <link>

Load using dynamically-created <style>

8 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related