jQuery | Get and Set CSS Classes

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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            jQuery addClass() Method
        </title>
          
        <script src=
        </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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
        <script src=
        </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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
        <script src=
        </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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
        <script src=
        </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>                    

    chevron_right

    
    

    Output:

    • Before click on the button:
    • After click on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.