jQuery addClass() Method

Last Updated:

jQuery addClass() Method

The jQuery addClass() method adds the specified class(es) to each element in the set of matched elements.

Adding One Class

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .point{ color: red; font-size: 22px; } </style> </head> <body> <h1>jQuery addClass() Method</h1> <p>Click on the button to add the class '.point' to this paragraph.</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ //. in front of className is not necessary. $("p").addClass("point"); }); }); </script> </body> </html>

Syntax

// Add one class $(selector).addClass(className); // Add multiple class $(selector).addClass(className1 className2)

Parameter Values

Value Type Explanation
className Required Specifies one or more class names to be added

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
addClass()YesYesYesYesYesYesYesYesYesYesYesYesYes

Adding Multiple Classes

Note: Classes are space-separated.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .point{ color: red; font-size: 22px; } .point1{ font-weight: bold; font-style: italic; } </style> </head> <body> <h1>jQuery addClass() Method</h1> <p>Click on the button to add classes 'point' and 'point1' to this paragraph.</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ // no comma separator. $("p").addClass("point point1"); }); }); </script> </body> </html>

Share this Page

Meet the Author