Dynamically loading css stylesheet doesn't work on IE
JavascriptJqueryHtmlCssInternet ExplorerJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
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');
}
Solution 2 - Javascript
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.
Solution 3 - Javascript
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);
Solution 4 - Javascript
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.
Solution 5 - Javascript
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...
Solution 6 - Javascript
Open ie8 without the debugger open. When you get to after the point of dynamic stylesheet... open the debugger