The jQuery addClass() method is used to add one or more CSS class to a selected element/elements. To add more than one class name, separate them using spaces.
$(selector).addClass(classname,function(index,currentclass))
Parameter | Description |
---|---|
classname | Required Parameter: names of the classes to be added to the selector |
function(index,currentClass) | Optional Parameter: A function that returns one or more class names that are spaces-separated. The returned class names are added to the selector.
|
I have a paragraph element to which I will apply CSS Class called red.
<style> .red { color: Red; } </style> <p id="myParagraph">My Paragraph</p> <button id="myButton">Add Class</button>
On the button Click I use the jQuery addClass like this:
$("#myButton").click(function (e) { $("#myParagraph").addClass("red"); });
This will add the red Class to the paragraph and it’s color changes to Red.
I can add more than one CSS Class to the selector using jQuery addClass method. Here I add 3 Classes to the paragraph element, these classes are red, fontBold and borderSolid.
<style> .red { color: Red; } .fontBold { font-weight: bold; } .borderSolid { border: solid 1px #4CAF50; } </style> <p id="myParagraph">My Paragraph</p> <button id="myButton">Add 3 Class</button>
The jQuery code:
$("#myButton").click(function (e) { $("#myParagraph").addClass("red fontBold borderSolid"); });
In the jQuery addClass method each of the 3 class names are separated by a space. So on the button click the myParagraph element will become:
–> Red in color, with font weight bold and a solid border.
The CSS Class names returned by the addClass() function parameter, are applied to the selector. Let me show you how to use this function.
I have 3 paragraph element, 2 already have red class while the 3rd does not contain any class. Now I want to add borderSolid class to the paragraph whose index is ‘not 0’ and does not contain the red class.
<style> .red { color: Red; } .borderSolid { border: solid 1px #4CAF50; } </style> <p class="red">First Paragraph with class "Red"</p> <p class="red">Second Paragraph with class "Red"</p> <p>Third Paragraph without any class</p> <button id="myButton">Add Class</button>
The jQuery addClass code will be:
$("#myButton").click(function (e) { $("p").addClass(function (index, currentClass) { if (index != 0 && currentClass == "red") return "borderSolid"; }); });
I used the addClass function to check for index not 0 and currentClass not red.
I returned borderSolid class at the end and this class is added to the 3rd paragraph element.
Check the demo & download codes links given below:
Share this article -