Créez du CSS avec jQuery (prependTo & append) ne fonctionnera pas pour Internet Explorer

Question

Je veux créer une grande feuille de style CSS et elle fonctionne bien dans Firefox et Chrome, mais Internet Explorer ne comprend pas mon script jQuery. Des idées sur la façon de résoudre ce problème ?

$("")
    .attr("type","text/css")
    .prependTo("head")
    .append("h1 {color: #F00}")
    .append("h2 {color: #0F0}")
    .append("h3 {color: #00F}")
</code></pre></x-turndown>

Answer 1

Utilisez ce code pour ajouter des règles CSS dynamiquement (testé sur la majorité des navigateurs) :

function dyn_css_rule(sSelector, sCssText) {
    try {
        var aSS = document.styleSheets;
        var i;
        for (i=aSS.length-1; i>=0; i--) {
            var oCss = document.styleSheets[i];
            var sMedia = (typeof(oCss.media) == "string")?
                oCss.media:
                oCss.media.mediaText;
            if (!sMedia
                || sMedia.indexOf("screen") != -1
                || sMedia.indexOf("all") != -1
            ) {
                break;
            }
        }
        if (oCss.insertRule) {
            oCss.insertRule(sSelector + " {" + sCssText + "}", oCss.cssRules.length);
        } else if (oCss.addRule) {
            oCss.addRule(sSelector, sCssText);
        }
    } catch(err) {
        var tag = document.createElement('style');
        tag.type = 'text/css'; 
        try {
            tag.innerHTML = sSelector + " {" + sCssText + "}";
        } catch(err) {
            tag.innerText = sSelector + " {" + sCssText + "}";
        }
        document.getElementsByTagName('head')[0].appendChild(tag);
    }
    return sSelector + "{" + sCssText + "}";
};

Utilisation :

dyn_css_rule("h1", "color: #F00");

Answer 2

Essayez $(""). IE n'aime pas la version unique.

$("").attr("type","text/css")
    .prependTo("head")
    .append("h1 {color: #F00}")
    .append("h2 {color: #0F0}")
    .append("h3 {color: #00F}");