jQuery provides three methods addClass(), removeClass() and toggleClass() to manipulate CSS classes of the elements.
We have divided our CSS manipulation discussion into two parts. This chapter will discuss about manipulating CSS classes and the next chapter will discuss about manipulating CSS properties.
jQuery – Adding CSS Classes
jQuery provides addClass() method to add a CSS class to the matched HTML element(s). Following is the syntax of the addClass() method:
$(selector).addClass(className);
This method takes a parameter which is one or more space-separated classes to be added to the class attribute of each matched element. More than one class may be added at a time, separated by a space, to the set of matched elements, like so:
$(selector).addClass("Class1 Class2");
Synopsis
Consider the following HTML content with CSS classes defined:
<style>
.big{ font-weight: bold; font-size:20px; }
.small{ font-weight: normal; font-size:10px; }
</style>
<body>
<div class="container">
<h2>jQuery addClass() Method</h2>
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
</body>
Now if we use the addClass() method as follows:
$( ".hello" ).addClass("big" );
$( ".goodbye" ).addClass("small" );
It will produce following result:
<body> <div class="container"> <h2>jQuery addClass() Method</h2> <div class="hello big">Hello</div> <div class="goodbye small">Goodbye</div> </div> </body>
Please note that addClass() method does not replace an existing class, rather it simply adds the class, appending it to any which may already be assigned to the elements.
Example
Let’s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$( ".hello" ).addClass("big" );
$( ".goodbye" ).addClass("small" );
});
});
</script>
<style>
.big{ font-weight: bold; font-size:20px; }
.small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
<div class="container">
<h2>jQuery addClass() Method</h2>
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
<br>
<button>Add Class</button>
</body>
</html>
jQuery – Removing CSS Classes
jQuery provides removeClass() method to remove an existing CSS class from the matched HTML element(s). Following is the syntax of the removeClass() method:
$(selector).removeClass(className);
This method takes a parameter which is one or more space-separated classes to be removed from the class attribute of each matched element. More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:
$(selector).removeClass("Class1 Class2");
Synopsis
Consider the following HTML content with CSS classes defined:
<style>
.big{ font-weight: bold; font-size:20px; }
.small{ font-weight: normal; font-size:10px; }
</style>
<body>
<div class="container">
<h2>jQuery removeClass() Method</h2>
<div class="hello big">Hello</div>
<div class="goodbye small">Goodbye</div>
</div>
</body>
Now if we use the removeClass() method as follows:
$( ".hello" ).removeClass("big" );
$( ".goodbye" ).removeClass("small" );
It will produce following result:
<body> <div class="container"> <h2>jQuery removeClass() Method</h2> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div> </body>
Example
Let’s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$( ".hello" ).removeClass("big" );
$( ".goodbye" ).removeClass("small" );
});
});
</script>
<style>
.big{ font-weight: bold; font-size:20px; }
.small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
<div class="container">
<h2>jQuery removeClass() Method</h2>
<div class="hello big">Hello</div>
<div class="goodbye small">Goodbye</div>
</div>
<br>
<button>Remove Class</button>
</body>
</html>
jQuery – Toggle CSS Classes
jQuery provides toggleClass() method to toggle an CSS class on the matched HTML element(s). Following is the syntax of the toggleClass() method:
$(selector).toggleClass(className);
This method takes a parameter which is one or more space-separated classes to be toggled. If an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
Example
Let’s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$( ".hello" ).toggleClass("big" );
});
});
</script>
<style>
.big{ font-weight: bold; font-size:20px; }
</style>
</head>
<body>
<div class="container">
<h2>jQuery toggleClass() Method</h2>
<div class="hello big">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
<br>
<button>Toggle Class</button>
</body>
</html>