This time I will share jQuery Plugin and tutorial about Easy CSS Manipulation JavaScript Library – jCSSRule, hope it will help you in programming stack.
jCSSRule is a jQuery/Vanilla JavaScript plugin to easily manipulate CSS rules of certain elements within the document.
How It Works:
The plugin dynamically inserts a stylesheet with CSS rules you defined into the document where the plugin is called.
How to use it:
1. Download and include the jcssrule.js
script on the page.
2 |
< script src = "jcssrule.js" defer></ script > |
6 |
< script src = "jcssrule.js" defer></ script > |
7 |
< script src = "jquery-cssrule.js" defer></ script > |
2. The JavaScript syntax to mainpulate CSS styles of any element(s) within the document. Available parameters:
- selector: the selector to apply CSS rules to
- property: a property or a key, value array of properties you want to set
- value: the value you want to set, if undefined will return the current value, if null remove the property
3 |
jCSSRule( "body" , "background" , "red" ); |
4 |
jCSSRule( "body" , { "background" : "red" , "color" : "white" }); |
6 |
<!-- As A jQuery Plugin --> |
7 |
$( "body" ).cssRule( "background" , "red" ); |
8 |
$( "body" ).cssRule({background ":" red ", " color ":" white"}); |
3. Remove the CSS rules.
2 |
jCSSRule( "body" , "background" , null ); |
6 |
$( "body" ).cssRule( "background" , null ); |
This awesome jQuery plugin is developed by Viglino. For more Advanced Usages, please check the demo page or visit the official website.