jQuery | addClass() with Examples

The addClass is an inbuilt method in jQuery which is used to add more property to each selected element. It can also be used to change the property of the selected element. This method can be used in two different ways:

1) By adding Class name directly:
Here, Class name can be used directly with the element which are going to be selected.
Syntax:

$(selector).addClass(className);

Parameters: It accepts a parameter “className” which is the name of the class that are going to be added.
Return Value: It returns the selected elements with added new class.

jQuery code to show the working of this method:

Code #1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <meta charset="utf-8">
    <title>addClass demo</title>
    <style>
        p {
            margin: 8px;
            font-size: 35px;
        }
          
        .selected {
            color: ;
            display: block;
            border: 2px solid green;
            width: 160px;
            height: 60px;
            background-color: lightgreen;
            padding: 20px;
        }
          
        .highlight {
            background: yellow;
        }
    </style>
    </script>
</head>
  
<body>
    <p>GeeksforGeeks</p>
    <p>gfg</p>
    <p>CSE</p>
    <script>
        $("p").last().addClass("selected");
    </script>
</body>
  
</html>

chevron_right


In the above code, “p” element is selected and “selected” class is applied only on last “p” element with the help of .last() method and .addClass() method of jQuery.
Output:

2) By passing a function to add new class:
Here, A function can be passed to the .addClass() for the selected element.
Syntax:

$(selector).addClass(function);

Parameters: It accepts a parameter “function”.
Return Value: It returns the selected element with added function.

Code #2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <meta charset="utf-8">
    <style>
        div {
            background: white;
            margin: 20px;
        }
          
        .red {
            background: red;
            width: 300px;
            margin: 20px;
        }
          
        .red.green {
            background: lightgreen;
            margin: 20px;
            border: 2px solid green;
        }
          
        body {
            border: 2px solid green;
            width: 350px;
            height: 200px;
        }
    </style>
    </script>
</head>
  
<body>
    <div>This div should be white</div>
    <div class="red">This div will be green because now it 
            has the both "green" and "red" classes.
    </div>
    <div>This div should be white</div>
    <script>
        $("div").addClass(function(index, currentClass) {
            var addedClass;
            if (currentClass === "red") {
                addedClass = "green";
                $("p").text("There is one green div");
            }
  
            return addedClass;
        });
    </script>
</body>
  
</html>

chevron_right


In the above code,The “div” element is selected and with the help of a function a new class is added to the selected div element.
Output:



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.