Dynamically loading css stylesheet doesn't wor

Question

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

Answer 1

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.

Answer 2

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...

Answer 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);

Answer 4

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

Answer 5

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.

Answer 6

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');