jQuery Plugin For Convenient CSS Manipulation - CSS Extender

The jQuery CSS Extender plugin extends & enhances the .css() method and provides more methods for easier CSS manipulation.

Features:

• Use raw CSS in .css().
• Use raw CSS blocks in .css().
• Reset CSS to default.
• Copy CSS from one to another element.
• Take or give CSS from one to another element.

How to use it:

1. Load the jQuery CSS Extender after loading the latest jQuery JavaScript library.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" 
        crossorigin="anonymous">
</script>
<!-- jQuery CSS Extender -->
<script src="./dist/jquery-css-extender.js"></script>

2. Use raw CSS in the .css().

$('#element').css(`
  margin: 0 auto;
  padding: 10px 20px;
  display: block;
  font-size: 20px;
  background-color: #ddd;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 3px 0 #bbb;
  cursor: pointer;
`);

3. Use raw CSS in the .css().

$('#element').css(`
  margin: 0 auto;
  padding: 10px 20px;
  display: block;
  font-size: 20px;
  background-color: #ddd;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 3px 0 #bbb;
  cursor: pointer;
`);

4. Use raw CSS blocks in the .css().

$('#button-container').css(`
  :this {
    display: flex;
  }

  button {
    margin: 0 auto;
    padding: 10px 20px;
    display: block;
    font-size: 20px;
    background-color: #ddd;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 3px 0 #bbb;
    cursor: pointer;
  }

  button:nth-of-type(2), button:nth-of-type(3) {
    box-shadow: none;
  }
  button:nth-of-type(2) {
    border: 3px solid #bbb;
  }
  
`);

5. Copy CSS from one to another.

$('#element2').copyCss($('#element1'));

6. Take or give CSS from one to another.

$('#button-container').css(`
  display: flex;
  justify-content: space-around;
`);

$('#button1').css(`
  padding: 10px 20px;

  font-size: 20px;

  background-color: #ddd;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 3px 0 #bbb;
  cursor: pointer;
`).giveCssTo($('#button2'));

$('#button3').takeCss($('#button2'));

7. Reset the CSS styles.

// Reset all CSS rules
$('#element').resetCss();

// Reset specific CSS rules
$('#element').resetCss(['property 1', 'property 2']);

8. Handle the history of CSS changes.

// Get the history of CSS changes
$('#element').cssHistory();

// Disable the CSS history
$('#element').useCssHistorySystem(false);

// Enable the CSS history
$('#element').useCssHistorySystem(true);

// Enable the CSS history for the next CSS changes ONLY
$('#element').forgetCssHistorySystemOnce();

9. Handle the CSS states.

// Save a CSS state named "myState"
$('#element').cssState('myState', {'color': 'red'});

// Uses the CSS state "myState"
$('#element').useCssFromState('myState');

// Create a new state using the current CSS rules
$('#element').css('...').cssStateFromCurrent('secondState');

// Save a default state from the current CSS rules
$('#element').css('...').defaultCssStateFromCurrent();

// Or from an object
$('#element').defaultCssState({...});

// Use the default CSS state
$('#element').useDefaultCssState();

10. Event handlers.

$('#element').cssStateOn('click', 'myState');
$('#element').cssStateOnHover('myState');
// or
$('#element')
  .cssState('default', {...})
  .cssState('hover', {...})
  .cssState('click', {...})
  .autoCssStateOn();

---

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