JSFiddle - React, Tailwind, and code Playground

by Dimitar Christoff

HTML

<div id="application_osx">foo</div>

JavaScript

var StyleWriter = new Class({
    // css classes on the fly, based on by Aaaron Newton's version
    createStyle: function(css, id) {
        try {
            if (document.id(id) && id) return;
            
            var style = new Element('style', {id: id||'',type:'text/css'}).inject(document.getElement('head'));
            if (Browser.Engine.trident)
                style.styleSheet.cssText = css;
            else
                style.set('text', css);
            
        } catch(e) {
            console.log("failed:", e);
        }
    }
});
                            
var rules = [
    "#application_osx { background: red url(/path/to/image/application_osx.png) }",
     "#someotherid { background: url(/path/to/image/someotherid.png) }"
];

// direct use through class
(function() {                           
    new StyleWriter().createStyle(rules.join("\n"), "mystyles");
}).delay(2000); // wait 2 sec then add css rules

// use as a mixin
var foo = new Class({
    Implements: [StyleWriter, Options],
    options: {
        rulesId: "foorules",
        rules: [
            "#application_osx { background: green url(/path/to/image/application_osx.png) }",
            "#someotherid { background: url(/path/to/image/someotherid.png) }"
        ]
    },
    initialize: function(options) {
        this.setOptions(options);
        this.createStyle(this.options.rules.join("\n"), this.options.rulesId);
    }
});

new foo();