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:
