CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer
pistacchio
pistacchio

Reputation: 58863

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

Upvotes: 74

Views: 35666

Answers (6)

ekerner
ekerner

Reputation: 5840

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.

Upvotes: 40

oliver foster
oliver foster

Reputation: 1

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.

Upvotes: 0

campino2k
campino2k

Reputation: 1661

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

Upvotes: 1

urig
urig

Reputation: 16831

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.

Upvotes: 2

cmanley
cmanley

Reputation: 31

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

Upvotes: 3

Rex M
Rex M

Reputation: 144112

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

Upvotes: 119

Related Questions