Javascript Jquery Add StyleSheet IE

Question

There is my code source :

            nodeCss = $('<link rel="stylesheet" href="about:blank" type="text/css" 

media="all" />');
                nodeCss.attr('href',css_file);
                $("head").append(nodeCss);

I have two problems on IE :

The first is stylesheet is ignored for the first time : my page allow me to reload a code, and when i do that, the stylesheet isn't more ignored. It's possible that stylesheet must be loaded before insert new Elements who are targetted by styleSheet.
The second problem, so the first can be "hacked" (because only on IE), it's the background "url(...)" in my dynamic stylesheet are never loaded in dynamic loading css file by javascript. the same action width a normal stylesheet on HTML results a background ok. One more, it's only IE : Chrome and Firefox does the work very good.

Sorry for my language, i speak a little english, be comprehensible.

Thanks a lot.

Correction : After Adding styleSheet, there is an animation during 500 ms before others elements added. The stylesheet should be loaded. — PHPToExpert
– PHPToExpert, Commented Oct 6, 2011 at 13:56
var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) document.getElementsByTagName("head")[0].appendChild(fileref) works perfectly, but why not my code ? — PHPToExpert
– PHPToExpert, Commented Oct 6, 2011 at 14:11
IT'S OK. jQuery does a work with $("<link ...") that is not compatible with IE. CreateElement width DOM is very better. Thanks for time you have taken to me with answers. — PHPToExpert
– PHPToExpert, Commented Oct 6, 2011 at 15:43

Justin Helgerson · Accepted Answer · 2011-10-06 13:59:13Z

2

Try using document.createStylesheet for IE browsers. MSDN has an article on how to use this method.

A potential cross browser solution:

(document.createStyleSheet) ? document.createStyleSheet(css_file) : $('<link rel="stylesheet" type="text/css" href="' + css_file + '" />').appendTo('head')

answered Oct 6, 2011 at 13:59

Justin Helgerson

25.7k19 gold badges104 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

duri · Accepted Answer · 2011-10-06 14:02:28Z

I won't answer directly to your question, because there are much more reliable and simpler ways how to achieve the desired effect.

If you want to dynamically load a CSS file appended to document using <link> element, just add it to your markup and set it the disabled attribute initially: <link rel=stylesheet href=style.css disabled>. All you have to do in JS/DOM is to set its DOM property disabled to false (boolean value). In jQuery, prop() method should be used to do this.

If your css_file variable can take more different values depending on some other code, the recommended solution is to change the class of <html> element. Then, you can easily use selectors like .state1 #selector and .state2 #selector to express different states in the HTML document.

Alex W · Accepted Answer · 2013-05-22 17:59:40Z

Adding a stylesheet dynamically with jQuery gives me a lot of issues in older versions of IE. Here's what I've ended up using that works cross-browser:

// Prevent Firefox security error
document.getElementsByTagName('head')[0].appendChild(document.createElement('style'));

// Get last style sheet so that the rules we add will take precedence
var sheet = document.styleSheets[document.styleSheets.length-1]; 


// Internet Explorer method
if(sheet.addRule)
{

    // FORMAT:
    // sheet.addRule('selector','rule: xxx');
    // sheet.addRule('selector','rule: xxx');

    sheet.addRule('a:hover','color: yellow');
    sheet.addRule('a:hover','text-decoration: none');

}

// All other browsers
if(sheet.insertRule)
{

    // FORMAT: sheet.insertRule('selector { rule: xxx; rule: xxx; rule: xxx; }');
    sheet.insertRule('a:hover { color: yellow; text-decoration: none; }', sheet.cssRules.length);
}

Collectives™ on Stack Overflow

Javascript Jquery Add StyleSheet IE

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related