jQuery | addClass() with Examples - GeeksforGeeks

13 Feb, 2019
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.
<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 src="https://code.jquery.com/jquery-1.10.2.js">    </script></head>  <body>    <p>GeeksforGeeks</p>    <p>gfg</p>    <p>CSE</p>    <script>        $("p").last().addClass("selected");    </script></body>  </html>
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:
<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 src="https://code.jquery.com/jquery-1.10.2.js">    </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>
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:
jQuery-HTML/CSS
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?