---
title: "what are the role of addClass() in JQ? how to add css property using the addClass()."  
description: "what are the role of addClass() in JQ? how to add css property using the addClass()."  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93815/what-are-the-role-of-addclass-in-jq-how-to-add-css-property-using-the-addclass  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 1 minute  

---

# what are the role of addClass() in JQ? how to add css property using the addClass().

what are the [role](https://www.mindstick.com/forum/2317/how-to-create-role-and-enable-role-in-mvc) of addClass() in JQ? how to [add](https://yourviews.mindstick.com/story/4883/5-signs-you-need-to-add-more-protein-to-your-diet) [css](https://www.mindstick.com/articles/12349/a-step-by-step-guide-to-making-pure-css-tooltips) [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) using the addClass().

## Answers

### Answer by Ravi Vishwakarma

We add the value of the class attribute through the addClasses() method in the query. Through this method we can add one or more classes. This method only adds class does not remove if we want to add more than one class, separate class names with spaces.

```
Syntax:$(selector).addClass (class-name)$(selector).addClass (class-name, function(index, old-class))
```

Example

```
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script>
    $(document).ready(function () {
        $('button').click(function () {
            $('div').addClass('change   ');
        });
    });
</script>
<style>
.change{
 background-color:red;
 width:50%;
 padding:20px;
 margin:10px;
 text-align:center;
 color:white;
 height:auto;
}
</style>
</head>
<body>
    <div >
        this is div <br />
        this color has been change after clicked button
    </div>
<button>Add class</button>
</body>
</html>  
```

Output:

![what are the role of addClass() in JQ? how to add css property using the addClass().](https://answers.mindstick.com/questionanswer/0ab09ab0-536d-4a7d-a1f4-161759d462ec/images/1a0cf64a-142c-4568-b54d-c2e4c95b7702.png)

\

\


---

Original Source: https://answers.mindstick.com/qa/93815/what-are-the-role-of-addclass-in-jq-how-to-add-css-property-using-the-addclass

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
