JQuery CSS Class

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