what are the role of addClass() in JQ? how to add css property using the addClass().

0 votes
59 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

what are the role of addClass() in JQ? how to add css property using the addClass().    

1 Answer

1 votes
Ravi Vishwakarma answered 29-Jul-2021 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().