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 🙂

About the Author:

Founder of onlinetutorialspoint.com Love Java, Python, Shell and opensource frameworks. Follow him on twitter and facebook for latest updates.

Leave A Comment