Open In App

jQuery | Get and Set CSS Classes

Last Updated : 27 Feb, 2019
Suggest changes
Share
Like Article
Like
Report
jQuery has various methods for CSS manipulation which are listed below:
  • addClass(): Adds one or more classes to the selected elements
  • removeClass(): Removes one or more classes from selected elements
  • toggleClass(): Toggles between adding or removing classes from selected elements
  • css(): Sets or returns style attribute
  • jQuery addClass() Method: The addClass is used to add more property to each selected element. It can also be used to change the property of the selected element. Syntax:
    $(content).addClass(target)
    Example: html
    <!DOCTYPE html> <html> <head> <title> jQuery addClass() Method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <!-- Script to use addClass method --> <script>  $(document).ready(function() {  $("button").click(function() {  $("h1, h2, p").addClass("green");  $("div").addClass("abs");  });  });  </script> <style>  .abs {  font-weight: bold;  font-size: xx-large;  }  .green {  color:green;  }  </style> </head> <body> <h1>GFG</h1> <h2>GeeksForGeeks</h2> <p>This is gfg.</p> <div>This is some different text.</div><br> <button>Add classes to elements</button> </body> </html> 
    Output:
    • Before click on the button:
    • After click on the button:
  • jQuery removeClass() Method: This method is used to remove a specific class attribute from different elements. Syntax:
    $(content).removeClass(target)
    Example: html
    <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <!-- Script to use removeClass method --> <script>  $(document).ready(function() {  $("button").click(function() {  $("h1, h2, p").removeClass("green");  });  });  </script> <style>  .important {  font-weight: bold;  font-size: xx-large;  }  .green {  color:green;  }  </style> </head> <body> <h1 class="green">Heading 1</h1> <h2 class="green">GFG</h2> <p class="green">welcome to GeeksForGeeks.</p> <p>This is other paragraph.</p> <button>Remove class from elements</button> </body> </html> 
    Output:
    • Before click on the button:
    • After click on the button:
  • jQuery toggleClass() Method: This method toggles between adding or removing classes from selected elements. Syntax:
    $(content).toggleClass(target)
    Example: html
    <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <!-- Script to use toggleClass() method --> <script>  $(document).ready(function() {  $("button").click(function() {  $("h1, h2, p").toggleClass("green");  });  });  </script> <style>  .green {  color:lightgreen;  }  </style> </head> <body> <h1>Heading</h1> <h2>gfg</h2> <p>welcome to gfg</p> <p>This is other paragraph.</p> <button>Toggle class</button> </body> </html> 
    Output:
    • Before click on the button:
    • After click on the button:
  • jQuery css() Method: This method sets or returns one or more style properties for selected elements. Syntax:
    $(content).css(target)
    Example: html
    <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <!-- Script to use css() method --> <script>  $(document).ready(function() {  $("button").click(function() {  alert("Background color = "   + $("p").css("background-color"));  });  });  </script> </head> <body> <h2>This is a heading</h2> <p style="background-color:green;">This is a gfg.</p> <p style="background-color:lightgreen">This is a gfg.</p> <p style="background-color:blue">This is a gfg.</p> <button>background-color of p</button> </body> </html> 
    Output:
    • Before click on the button:
    • After click on the button:

Explore