Generate and edit a dynamic Cascading Style Sheet using JavaScript.
Install the script via npm:
npm install stylesheet.js --save
Require it in your app:
var Stylesheet = require('stylesheet.js');Install the script via bower:
bower install stylesheet.js --save
Include it in the head of your page:
…
<head>
…
<script src="/bower_components/stylesheet.js/dist/stylesheet.min.js"></script>
…
</head>
…You are now ready to go!
Generate a new Instance:
var stylesheet = new Stylesheet();You can add new rules to that created stylesheet. It takes 3 parameters:
- required String
selectorThe CSS selector. - required String
rulesThe CSS rules. - optional Number
indexAn index, where to insert the rule at in the new stylesheet.
To delete a rule, pass in the selector of that rule.
- required String
selectorThe CSS selector.
This will clear the whole stylesheet, leaving it empty without any rules.
var stylesheet = new Stylesheet();
stylesheet.addRule('.ninja', 'visibility: hidden;'); // Add a new rule
stylesheet.addRule('.bear', 'color: white;'); // Add a second rule
stylesheet.addRule('.bear', 'color: brown;', 0); // Add as first rule
stylesheet.deleteRule('.ninja'); // Delete the .ninja rule
stylesheet.clear(); // Clear all rulesIn lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality.
Copyright (c) 2014 Robert Katzki. Licensed under the MIT license.