Dynamically loading css stylesheet doesn't work on IE

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

Answers:

Answer

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

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

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

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.