♦ jQuery CSS Classes
♣ About jQuery CSS Classes
The CSS class can be added/removed directly from jQuery very easily.Below is a tabular explanation of jQuery Classes
| Method | Description |
|---|---|
| addClass() | Adds class(s) to HTML element(s) |
| removeClass() | Removes class(s) from HTML element(s) |
| toggleClass() | Toggles class(s) of HTML element(s) |
| css() | Sets CSS properties of HTML element(s) |
♣ Example1: jQuery addClass()
Adds class(s) to HTML element(s).In this example, jQuery addClass() method is illustrated.
Example
Input:
Output:
♣ Example2: jQuery removeClass()
Removes class(s) from HTML element(s).In this example, jQuery removeClass() method is illustrated.
Example
Input:
Output:
♣ Example3: jQuery toggleClass()
Toggles class(s) of HTML element(s).In this example, jQuery toggleClass() method is illustrated.
Example
Input:
Output:
♣ Example4: jQuery css() Part1
Sets CSS properties of HTML element(s).Below is the representation of css() single-property Syntax.
Basic Syntax
css("property_name","property_value");
Syntax Explanation:
property_name : name of the property to be styled for HTML element
property_value : value of the property
In this example, single-property jQuery css() methods is illustrated.property_value : value of the property
Example
Input:
Output:
♣ Example4: jQuery css() Part2
Below is the representation of css() multi-property Syntax.Basic Syntax
css({"property_name_1":"property_value_1","property_name_2":"property_value_2", "property_name_3":"property_value_3", ...});
Syntax Explanation:
property_name_1, property_name_2, property_name_3, .. : properties to be styled for HTML elements
property_name_1, property_name_2, property_name_3, .. : values of properties, are totally same as css styling values
In this example, multi-property jQuery css() methods is illustrated.property_name_1, property_name_2, property_name_3, .. : values of properties, are totally same as css styling values
Example
Input:
Output: