Download jQuery Plugin For Convenient CSS Manipulation – CSS Extender

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Convenient CSS Manipulation – CSS Extender, hope it will help you in programming stack.

File Size:	58.2 KB
Views Total:	242
Last Update:	2 years ago
Publish Date:	2 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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.

1
<!-- jQuery -->

2
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

3
        integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="

4
        crossorigin="anonymous">

5
</script>

6
<!-- jQuery CSS Extender -->

7
<script src="./dist/jquery-css-extender.js"></script>

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

01
$('#element').css(

02
  margin: 0 auto;

03
  padding: 10px 20px;

04
  display: block;

05
  font-size: 20px;

06
  background-color: #ddd;

07
  border: 0;

08
  border-radius: 5px;

09
  box-shadow: 0 3px 0 #bbb;

10
  cursor: pointer;

11
);

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

01
$('#element').css(

02
  margin: 0 auto;

03
  padding: 10px 20px;

04
  display: block;

05
  font-size: 20px;

06
  background-color: #ddd;

07
  border: 0;

08
  border-radius: 5px;

09
  box-shadow: 0 3px 0 #bbb;

10
  cursor: pointer;

11
);

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

01
$('#button-container').css(

02
  :this {

03
    display: flex;

04
  }

05
 
06
  button {

07
    margin: 0 auto;

08
    padding: 10px 20px;

09
    display: block;

10
    font-size: 20px;

11
    background-color: #ddd;

12
    border: 0;

13
    border-radius: 5px;

14
    box-shadow: 0 3px 0 #bbb;

15
    cursor: pointer;

16
  }

17
 
18
  button:nth-of-type(2), button:nth-of-type(3) {

19
    box-shadow: none;

20
  }

21
  button:nth-of-type(2) {

22
    border: 3px solid #bbb;

23
  }

24
   
25
);

5. Copy CSS from one to another.

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

6. Take or give CSS from one to another.

01
$('#button-container').css(

02
  display: flex;

03
  justify-content: space-around;

04
);

05
 
06
$('#button1').css(

07
  padding: 10px 20px;

08
 
09
  font-size: 20px;

10
 
11
  background-color: #ddd;

12
  border: 0;

13
  border-radius: 5px;

14
  box-shadow: 0 3px 0 #bbb;

15
  cursor: pointer;

16
).giveCssTo($('#button2'));

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

7. Reset the CSS styles.

1
// Reset all CSS rules

2
$('#element').resetCss();

3
 
4
// Reset specific CSS rules

5
$('#element').resetCss(['property 1', 'property 2']);

8. Handle the history of CSS changes.

01
// Get the history of CSS changes

02
$('#element').cssHistory();

03
 
04
// Disable the CSS history

05
$('#element').useCssHistorySystem(false);

06
 
07
// Enable the CSS history

08
$('#element').useCssHistorySystem(true);

09
 
10
// Enable the CSS history for the next CSS changes ONLY

11
$('#element').forgetCssHistorySystemOnce();

9. Handle the CSS states.

01
// Save a CSS state named "myState"

02
$('#element').cssState('myState', {'color': 'red'});

03
 
04
// Uses the CSS state "myState"

05
$('#element').useCssFromState('myState');

06
 
07
// Create a new state using the current CSS rules

08
$('#element').css('...').cssStateFromCurrent('secondState');

09
 
10
// Save a default state from the current CSS rules

11
$('#element').css('...').defaultCssStateFromCurrent();

12
 
13
// Or from an object

14
$('#element').defaultCssState({...});

15
 
16
// Use the default CSS state

17
$('#element').useDefaultCssState();

10. Event handlers.

1
$('#element').cssStateOn('click', 'myState');

2
$('#element').cssStateOnHover('myState');

3
// or

4
$('#element')

5
  .cssState('default', {...})

source : jquery.net
Share this:Facebook
Tweet
WhatsApp
Related posts:Free Download Advanced Speech Bubble Tooltip Plugin – jQuery FlstBubble.js
Free Download Smooth Sticky Header In jQuery – sp.stickyHeader.js
Free Download Powerful Calendar Plugin With jQuery – Calendar.js

6
  .cssState('hover', {...})