jQuery addClass() Method
The addClass() method is an inbuilt method in jQuery which is used to add more properties 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 a Class name directly: Here, the Class name can be used directly with the element which is going to be selected.
Syntax:
$(selector).addClass(className);
Parameters: It accepts the parameter “className” which is the name of the class that is going to be added.
Return Value: It returns the selected elements with the added new class.
Example 1:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= </script> <title>addClass demo</title> <style> p { margin: 8px; font-size: 35px; } .selected { display: block; border: 2px solid green; width: 160px; height: 60px; background-color: lightgreen; padding: 20px; } .highlight { background: yellow; } </style> </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 a 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.
Example 2:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= </script> <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> </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:
Please Login to comment...