Final cross browser way to dynamically insert style elements into the DOM

Question

Although inserting style nodes into the DOM sounds rather trivial, I have found many contradictory ways to do so. So I decided to look it up on stackoverflow and it appears that many posts offer methodologies that do what I need, however they do not necessarily agree with each other.

I came across the following javascript methods:

Returns a style element, and apparently does not have the "styleSheet" property in older browsers.

document.createElement("style")

Returns a styleSheet object, although I do not know how you would subsequently access the style element (which you will need to insert into the DOM).

document.createStyleElement()

The first three methods below work on styleSheets, others are "hacks" that work directly on the style nodes.

styleSheet.cssText
styleSheet.addRule
styleSheet.insertRule
style.createTextNode
style.innerHTML

I also had a hard time finding the correct syntax to use on (at least) the first three styleSheet methods. E.g. whether or not it is mandatory to include the curly braces and semicolons.

Also, these properties are used for accessing a styleSheet in various browsers:

document.styleSheets[index]
element.styleSheet
element.sheet

What would be the correct bundle of methods to use for a cross browser approach on inserting style elements? This should cover older browsers like IE6, subselectors (such as :visited) and !important statements.

*"This should cover older browsers like IE6"*. Why? Nobody supports IE6 anymore. — Šime Vidas, Jul 09 '13 at 20:56

score 1 · Answer 1 · edited May 23 '17 at 11:59

Processed from this question:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';

if (style.styleSheet)
    style.styleSheet.cssText = css;
else
    style.appendChild(document.createTextNode(css));

head.appendChild(style);

It says it was tested in IE 7-9, Firefox, Opera, and Chrome, so it's pretty compatible.

And here are two links that might help:

Dynamic style - manipulating CSS with JavaScript - W3C Wiki
W3C DOM Compatibility - CSS

score 0 · Answer 2 · answered Jul 09 '13 at 20:54

0

My proposal:

var elem = document.createElement('style');
elem.innerHTML = 'body { background: green }';
document.body.appendChild(elem);

Live demo: http://jsfiddle.net/simevidas/bhX86/

I'm looking into how to make this work in IE8.

answered Jul 09 '13 at 20:54

Šime Vidas

182,163
62
281
385

I believe this has been done and redone many times. It usually boils down to setting `.styleSheet.cssText` for IE (and you'll also need to set the `type` property) http://jsfiddle.net/bhX86/9/ – Fabrício Matté Jul 09 '13 at 21:35

Xotic750 · Answer 3 · 2013-07-09T21:20:26.507

You mean something like this? This should be cross-browser.

HTML

<div id="target">text</div>

Javascript

function injectStyle(data, attributes, inBody) {
    attributes = attributes || {};
    inBody = inBody || false;

    var inject = document.createElement("style"),
        i;

    inject.type = "text/css";
    for (i in attributes) {
        if (attributes.hasOwnProperty(i)) {
            inject[i] = attributes[i];
        }
    }

    inject.appendChild(document.createTextNode(data));
    if (inBody) {
        return document.body.appendChild(inject);
    }

    return (document.head || document.getElementsByTagName("head")[0] || document.documentElement).appendChild(inject);
}

injectStyle("#target { border-style: solid; border-width: 5px; }", {
    id: "injectedStyle"
});

on jsfiddle

Final cross browser way to dynamically insert style elements into the DOM

3 Answers3