Skip to main content

Insert rule giving specified STYLE to given SELECTOR at the end of first CSS stylesheet.

/**
 * Insert rule giving specified STYLE to given SELECTOR at the end of
 * first CSS stylesheet.
 *
 * @param {String} selector: CSS selector, e.g. '.class'
 * @param {String} style: rule contents, e.g. 'background-color: red;'
 */
function addCssRule(selector, style) {
    var stylesheet = document.styleSheets[0];

    var theRules = [];
    if (stylesheet.cssRules) {     // W3C way
        theRules = stylesheet.cssRules;
    } else if (stylesheet.rules) { // IE way
        theRules = stylesheet.rules;
    }

    if (stylesheet.insertRule) {    // W3C way
        stylesheet.insertRule(selector + ' { ' + style + ' }', theRules.length);
    } else if (stylesheet.addRule) { // IE way
        stylesheet.addRule(selector, style);
    }
}