jQuery CSS Classes

Using the jQuery CSS classes, it is easy to manipulate the CSS of elements. jQuery has several methods for CSS manipulation. These are as follows:

addClass()
removeClass()
toggleClass()
css()

jQuery addClass() Method

jQuery addClass() method is used to add class attributes to different elements. This method is only used to add the class name to the class elements not to remove the attributes of the existing class. Syntax:
$(selector).addClass(classname,function(index,currentclass))
classname: It is used to specify one or more class names which you want to add and it is a mandatory parameter. function: It is used to specify a function that returns one or more class names to be added and it is an optional parameter. index: It is used to return the index position of the content. currentclass: It is used to provide the current class name of the selected content.

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(){   
        $("p").addClass("intro");    
    });    
});    
</script>    
<style>    
.intro {    
    font-size: 200%;    
    color: red;    
}    
</style>    
</head>    
<body>      
<h1>This is the first heading</h1>     
<p>Hello, world!.</p>    
<p>This is a paragraph.</p>     
<button>Add a class name to the first p element</button>     
</body>    
</html>
Try Now

jQuery removeClass() Method

jQuery remove() method is used to remove one or more classes from the selected elements. Syntax:
$(selector).removeClass(classname,function(index,currentclass))
classname: It is used to specify one or more class names which you want to remove and it is a mandatory parameter. function: It is used to specify a function that returns one or more class names to be removed and it is an optional parameter. index: It is used to return the index position of the content. currentclass: It is used to provide the current class name of the selected content.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("h2, p").removeClass("blue");  
    });  
});  
</script>  
<style>  
.important {  
    font-weight: bold;  
    font-size: xx-large;  
}    
.blue {  
    color: blue;  
}  
</style>  
</head>  
<body>   
<h2 class="blue">This is a heading</h2>  
<p class="blue">Hello, World!.</p>   
<p>This is the a paragraph.</p>  
<button>Remove class from elements</button>    
</body>  
</html>
Try Now

jQuery toggleClass()

Using the jQuery toggleClass() method you can add or remove the classes from the selected elements. In this method, if the name of the class is missing, it adds or if the class name is already set, it removes. Syntax
$(selector).toggleClass(classname,function(index,currentclass),switch)
classname: It is used to specify one or more class names which you want to add or remove. It is a mandatory parameter. function: It is used to specify a function that returns one or more class names to be added or removed. It is an optional parameter. index: It is used to return the index position of the content. currentclass: It is used to provide the current class name of the selected content.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("h1, h2, p").toggleClass("red");  
    });  
});  
</script>  
<style>  
.red {  
    color: red;  
}  
</style>  
</head>  
<body>    
<h1>Heading 1</h1>  
<h2>Heading 2</h2>    
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>Toggle class</button>    
</body>  
</html>
Try Now