Adding CSS Classes to Element Using jQuery .addClass() Method

jQuery addClass: Main Tips

• jQuery .addClass() assigns a class to selected elements.
• The function can be used on XML documents.
• You may use .removeClass() method to remove classes added with jQuery .addClass().

How to Add Classes

The jQuery .addClass() method applies a class for each matched element. In the example below, an element changes color and size upon clicking a button:

$("button").click(() => {
    $("div:first").addClass("div1");
});

There are two kinds of syntax you might use:

• $("selector").addClass(class); - add a class you wish to apply. To add more than one class, separate them by spaces.
• $("selector").addClass(function); - you might also name a function that returns a class name (or multiple) to be added.

Note: jQuery .addClass() method adds a class and does not replace the old ones.