With JQuery, you can easily manipulate CSS elements.
JQuery Operation CSS
JQuery has several methods for working with CSS. We will study the following:
AddClass ()-adds one or more classes to the selected element
Removeclass ()-deletes one or more classes from the selected element
Toggleclass ()-switch operation to add/Remove classes for selected elements
CSS ()-Set or return style properties
Instance style sheet
The following style sheet will be used for all the examples on this page:
. Important
{
Font-weight:bold;
Font-size:xx-large;
}
. Blue
{
Color:blue;
}
JQuery addclass () method
The following example shows how to add a class attribute to different elements. Of course, when you add a class, you can also select multiple elements:
Instance $ ("button"). Click (function () {
$ ("H1,h2,p"). AddClass ("Blue");
$ ("div"). AddClass ("important");
});
Try it?
You can also specify multiple classes in the AddClass () method:
Instance $ ("button"). Click (function () {
$ ("#div1"). AddClass ("Important blue");
});
Try it?
tip: want to know how jquery uses the AddClass () method to add class to an element in a specific exercise? Please refer to this site jquery programming Combat!
JQuery Removeclass () method
The following example shows how to remove the specified class attribute from a different element:
Instance $ ("button"). Click (function () {
$ ("H1,h2,p"). Removeclass ("Blue");
});
Try it?
tip: with the above example, did you learn how to remove the class attribute in jquery? Perhaps, you can also through the jquery programming of this site "use jquery to remove the HTML elements of Class" section to consolidate knowledge!
JQuery Toggleclass () method
The following example shows how to use the JQuery Toggleclass () method. This method toggles the Add/Remove class for the selected element:
Instance $ ("button"). Click (function () {
$ ("H1,h2,p"). Toggleclass ("Blue");
});
Try it?
JQuery css () method
We'll explain the jQuery css () method in the next chapter.
JQuery CSS Class