Style Injector

js

// ==UserScriptInclude==
// @name         Style Injector
// @namespace    http://userscripts.softhyena.com/lib/style_injector.js
// @namespace    https://gist.github.com/FelixWolf/479521b01a957ab980ab
// @version      0.1
// @description  Simple method of injecting styles
// @author       Félix Wolf
// @match        *
// @grant        none
// @run-at       document-start
// ==/UserScriptInclude==
var StyleInjector = function(){
    console.log("Injector added");
    var self = this;
    this.styleelm = document.createElement("style");
    this.id="styleInjector"+Math.round(Math.random()*0xffffffff);
    this.styleelm.setAttribute("id",this.id);
    this.stylesheet = null;
    document.head.appendChild(this.styleelm);
    for(var i=0;i<document.styleSheets.length;i++){
        if(document.styleSheets[i].ownerNode.getAttribute("id") == this.id){
            this.stylesheet=document.styleSheets[i];
            break;
        }
    }
    /*
      styleInjector.insertRule(string rulename, object rules, integer index);
      Usage:
        styleInjector.insertRule("body", {"background":"#0080ff"}, 1);
    */
    this.insertRule = function(rule, params, index){
        console.log("Rule ["+rule+"] inserted at ["+index+"].");
        rule=rule+"{";
        for(var i=0,x=Object.keys(params);i<x.length;i++)
            rule=rule+(x[i].replace(/(\{)|(\})|(\;)/g,""))+":"+(params[x[i]].replace(/(\{)|(\})|(\;)/g,""))+";";
        if(typeof index == "undefined")index=self.stylesheet.cssRules.length;
        self.stylesheet.insertRule(rule+"}", index);
        return index;
    }
    /*
      styleInjector.insertRuleRaw(string rule, integer index);
      Usage:
        styleInjector.addRule("body{background:#0080ff;}", 1);
    */
    this.insertRuleRaw = function(rule, index){
        console.log("Rule ["+rule+"] inserted at ["+index+"].");
        if(typeof index == "undefined")index=self.stylesheet.cssRules.length;
        self.stylesheet.insertRule(rule, index);
        return index;
    }
    /*
      styleInjector.addRule(string rulename, object rules);
      Usage:
        styleInjector.addRule("body", {"background":"#0080ff"});
    */
    this.addRule = function(rule, params){
        console.log("Rule ["+rule+"] added");
        rule=rule+"{";
        for(var i=0,x=Object.keys(params);i<x.length;i++)
            rule=rule+(x[i].replace(/(\{)|(\})|(\;)/g,""))+":"+(params[x[i]].replace(/(\{)|(\})|(\;)/g,""))+";";
        self.stylesheet.insertRule(rule+"}", self.stylesheet.cssRules.length);
        return self.stylesheet.cssRules.length-1;
    }
    /*
      styleInjector.addRuleRaw(string rule);
      Usage:
        styleInjector.addRuleRaw("body{background:#0080ff;}");
    */
    this.addRuleRaw = function(rule, params){
        console.log("Rule ["+rule+"] added");
        self.stylesheet.insertRule(rule, self.stylesheet.cssRules.length);
        return self.stylesheet.cssRules.length-1;
    }
    this.deleteRule = function(index){
        console.log("Rule ["+index+"] removed");
        self.stylesheet.deleteRule(index);
        return self.stylesheet.cssRules.length;
    }
    console.log(this.stylesheet);
}