pistacchio pistacchio - 1 year ago 67
Javascript Question

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];
.attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })

This works fine in Firefox and Google Chrome, but not in IE.

Any help?

Answer Source

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)
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head');