Tuesday , March 28 2017
Home / jquery / JQuery CSS Classes Example Tutorials

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 🙂

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

JQuery Remove Elements Example

In this tutorial we  are going to understand JQuery Remove Elements. Remove Elements in JQuery …

Leave a Reply

Your email address will not be published. Required fields are marked *