css-controls

Cross-browser stylesheet creation and css rule creation/deletion (includes IE6 support)

css-controls

Cross-browser stylesheet creation and css rule creation/deletion (includes IE6 support).

This was created to be a well-tested cross-browser library for basic CSS stylesheet and rule creaton/deletion.

css-controls is available via the following:

For npm and component, you can load it in as follows:

var cssControls = require('css-controls');

For bower and http, you can use vanilla JS

<script src="components/css-controls.js"></script>
window.cssControls; // `css-controls` is defined on `window` in camelCase

or you can use AMD

require(['css-controls'], funtion (cssControls) { /* code */ });

or CommonJS syntax (see npm/component section).

Once you have the module loaded, you can create new style sheets and add/remove CSS rules.

// Create a stylesheet (auto-appended to DOM) 
var sheet = cssControls.createStyleSheet();
 
// Color all `p` tags red (ruleIndex = index rule was created at) 
var ruleIndex = cssControls.addRule(sheet, 'p', 'color: red');
 
// Color the `body` green 
cssControls.addRule(sheet, 'body', 'background: #BADA55');
 
// Remove the first rule 
cssControls.removeRule(ruleIndex); // Equivalent to cssControls.removeRule(sheet, 0); 

css-controls returns 3 cross-browser functions.

cssControls.createStyleSheet();
/**
 * Create and append stylesheet to DOM
 * @returns {CSSStyleElement} Created stylesheet
 */
cssControls.addRule(styleSheet, selector, property);
/**
 * Add a CSS rule to a stylesheet
 * @param {CSSStyleElement} styleSheet Stylesheet to add rule to
 * @param {String} selector CSS selector (e.g. `.nav > .nav-bar`)
 * @param {String} property CSS property to apply to `selector` (e.g. `background: blue`)
 * @returns {Number} Index the rule was inserted at
 */
cssControls.removeRule(styleSheet, index);
/**
 * Remove a CSS rule from a stylesheet
 * @param {CSSStyleElement} styleSheet Stylesheet to remove rule from
 * @param {Numer} index Index of the rule to remove
 */

A large amount of the background knowledge came from quirksmode.

css-controls can be used with document.styleSheets as these are CSSStyleElements

// Color the `body` via the first stylesheet 
var sheet = document.styleSheets[0];
cssControls.addRule(sheet, 'body', 'background: papayawhip');

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint via grunt and test via npm test.

Copyright (c) 2013 Todd Wolfson

Licensed under the MIT license.