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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent