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