jQuery | Get and Set CSS Classes

Last Updated : 27 Feb, 2019

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:

<!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:

<!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:

<!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:

<!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>                     