74

I dynamically load a css stylesheet (with a little help from jQuery) like this:

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

This works fine in Firefox and Google Chrome, but not in IE.

Any help? Thanks

Rex M
  • 142,167
  • 33
  • 283
  • 313
pistacchio
  • 56,889
  • 107
  • 278
  • 420
  • Duplicate of http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript – dude Feb 02 '15 at 11:14

6 Answers6

119

Once IE has processed all the styles loaded with the page, the only reliable way to add another stylesheet is with document.createStyleSheet(url)

See the MSDN article on createStyleSheet for a few more details.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}
Soviut
  • 88,194
  • 49
  • 192
  • 260
Rex M
  • 142,167
  • 33
  • 283
  • 313
  • 1
    Documentation for document.createStyleSheet: http://www.ssicom.org/js/x276572.htm (the MSDN article fails with a 503 error...). Note that the returned object is a DispHtmlStyleSheet object, not a LINK element. To get the link tag from this object, you need to access document.createStyleSheet('...').owningElement – Chris Moschini Jun 25 '12 at 23:57
  • I believe dynamically creating a new style tag `` and adding it into also works in IE. – Pacerier May 24 '13 at 15:33
  • 3
    Update 09/2013: createStyleSheet method is no longer supported. For more information, visit: http://msdn.microsoft.com/en-us/library/ie/ms531194%28v=vs.85%29.aspx – pablofiumara Sep 30 '13 at 22:55
  • My solution below disagrees, – ekerner Feb 02 '15 at 16:12
  • I tried @ekerner's solution below, but this is the only solution that worked in IE9 (emulated mode). – contactmatt Feb 27 '16 at 03:34
  • see browser support http://help.dottoro.com/ljpxthtl.php and below can see a cross-browser solution – WantToDo Oct 26 '20 at 09:21
40

You need to set the href attr last and only after the link elem is appended to the head:

$('<link>')
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');

Update

Nowadays the only purpose of IE and Edge is to download Chrome, so I recommend NOT bloating your code with custom support for IE or Edge and rather just ignoring their existence.

ekerner
  • 5,650
  • 1
  • 37
  • 31
  • 9
    This is an important Internet Explorer quirk to note (even as recently as IE 8), and was absolutely critical to a project I was working on. Thanks for noting it here. When will folks stop using IE? – Jay Dansand Dec 22 '11 at 18:01
  • 2
    I like this better than the IE-only 'document.createStyleSheet' method. – Graham Jul 19 '12 at 14:41
  • 1
    This did work for me on an IE9 in IE8 compatibility mode but failed on a pure/real IE8. On a real IE8 only the 'document.createStyleSheet' method was reliable for me. Just to let others know who experience the same issue. – Kosi2801 Oct 29 '12 at 13:41
  • @Kosi2801 - Strange. It works nicely on my pure/real IE8 in IE8 standart mode. – DarkSide Nov 26 '12 at 23:11
  • @Chris Moschini : Not much ever did work in IE6. But Iv had this running in IE6, not that it matters any more. – ekerner Aug 15 '13 at 07:47
  • 1
    For this to work on my actual IE8 win7 VM from modern.ie, I had to put quotes the attribute names : 'type' and 'rel'... – Pierre Henry Feb 06 '14 at 15:59
  • @Pierre are you sure about that Pierre? {type : 'text/css', rel : 'stylesheet'} is just a Javascript object declaration and you should not need to quote the keys. – ekerner Feb 08 '14 at 00:29
  • 1
    Tested this in IE9 and it solved a stylesheet injection issue I was having! Really appreciate it! – Marc Fowler Apr 30 '14 at 09:43
  • Just in case this helps, I was getting a blank white screen whenever I appeneded a stylesheet to the DOM in IE8. Using this fixed my bug. THANK YOU! – StingeyB Oct 28 '14 at 18:14
  • What about inline styles? – dude Feb 02 '15 at 11:11
  • @julmot try $('').appendTo('head'); or $('head').append(''); – ekerner Feb 02 '15 at 16:10
  • I've already tried it. This will not work in IE8. I've solved it with ``document.createStylesheet`` – dude Feb 03 '15 at 16:59
  • 1
    This fix is still relevant on scenarios which use iframes - in my case Corner Stone On Demand (CSOD) LMS. The CSS need to be loaded dynamically, but it failed to load on IE9 (shows 404 error). Earlier I used `$('').appendTo("head");` but solution by @ekerner fixed it for me. – Shiyaz Jun 23 '15 at 14:54
3

This also seems to work in IE:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/includes/style.css';
document.getElementsByTagName('head')[0].appendChild(link);
cmanley
  • 31
  • 1
2

This might also have something to do with it - Taken from Microsoft Support article:

Styles on a webpage are missing or look incorrect when the page loads in the versions of Microsoft Internet Explorer ...

...This problem occurs because the following conditions are true in Internet Explorer:

  • All style tags after the first 31 style tags are not applied.

  • All style rules after the first 4,095 rules are not applied.

  • On pages that uses the @import rule to continously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

urig
  • 16,016
  • 26
  • 115
  • 184
1

It seems that 

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

works also in IE as long as the url is a fully qualified URI including the protocol...

campino2k
  • 1,618
  • 1
  • 14
  • 25
0

Open ie8 without the debugger open. When you get to after the point of dynamic stylesheet... open the debugger and voila, they should be there.

oliver foster
  • 1