css manipulation jcssrule - Free Download Easy CSS Manipulation JavaScript Library - jCSSRule

Free Download Easy CSS Manipulation JavaScript Library – jCSSRule

Posted on

This time I will share jQuery Plugin and tutorial about Easy CSS Manipulation JavaScript Library – jCSSRule, hope it will help you in programming stack.

css manipulation jcssrule - Free Download Easy CSS Manipulation JavaScript Library - jCSSRule
File Size: 6.33 KB
Views Total: 614
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 <!-- As A Vanilla JS Plugin -->
2 <script src="jcssrule.js" defer></script>
3  
4 <!-- As A jQuery Plugin -->
5 <script src="https://code.jquery.com/jquery-1.12.4.min.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
1 // As A Vanilla JS Plugin
2 // jCSSRule(selector, property, value);
3 jCSSRule("body", "background","red");
4 jCSSRule("body", {"background":"red", "color":"white"});
5  
6 <!-- As A jQuery Plugin -->
7 $("body").cssRule("background","red");
8 $("body").cssRule({background":"red", "color":"white"});

3. Remove the CSS rules.

1 // As A Vanilla JS Plugin
2 jCSSRule("body", "background",null);
3 jCSSRule("*", null);
4  
5 // As A jQuery Plugin
6 $("body").cssRule("background",null);
7 $("*").cssRule(null);

This awesome jQuery plugin is developed by Viglino. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net