JQuery CSS Classes Example Tutorials

In this tutorials, we are going to discuss about JQuery CSS Classes. JQuery provides us different methods to access and manipulate the css elements. Here are the listed :

JQuery CSS Classes :

addClass()
removeClass()
toggleClass()
css()

JQuery addClass() :

JQuery addClass() method is used to adding one or more css classes to selected element(s).

$("#target").addClass("class1");
OR
$("#target").addClass("class1 clss2");

We can pass multiple classes to addClass() method.

JQuery removeClass() :

JQuery removeClass() method is used to removing one or more css classes from selected element(s).

$("#target").removeClass("class1");
OR
$("#target").removeClass("class1 clss2");

We can pass multiple classes to removeClass() method.

JQuery toggleClass() :

JQuery toggleClass() is used for toggling purposes and it is used to toggle between add or remove classes.

$("#target").toggleClass(className)

This method is used to toggle one or more class names from each element in the matched set.

$("#target").toggleClass(className, state)

On the above the state parameter represents the boolean value. If the state is true, the toggle will happen otherwise its stopped.

JQuery css() :

This method is used to sets or returns one or more style properties for the selected elements.

$("#trget").css("background-color","red")
OR
$("#trget").css({"background-color:red;border:1px solid blue"})

Happy Learning 🙂