Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How CSS classes can be manipulated in HTML using jQuery?
In this article, we are going learn how CSS classes can be manipulated in HTML using jQuery.
Using jQuery, it is easy to manipulate the style of HTML elements. We have several jQuery methods that are used to manipulate the CSS. Let us discuss them one by one with suitable examples.
jQuery addClass() Method
The jQuery addClass() method is used to add one or more classes to the selected elements.
Syntax
Following is the syntax of jQuery addClass() method −
$(selector).addClass(classname);
The "classname" is a required parameter. It specifies one or more class names to be added.
Example
In the following example, we are adding class attributes to the HTML elements using the jQuery addClass() method −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3").addClass("newclass1");
$("p").addClass("newclass2");
});
});
</script>
<style>
.newclass1 {
font-size: xx-large;
}
.newclass2 {
font-weight: bold;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3>Tutorialspoint</h3>
<p>Simply Easy Learning at your fingertips.</p>
<button>Click to add classes to elements</button>
</body>
</html>
Output
After executing the above program, when you click on the button, the style of the heading and paragraph elements will be manipulated according to the properties specified in CSS.
Example
Here, we are specifying multiple classes within the jQuery addClass() method by separating the class names with spaces.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3, p").addClass("newclass1 newclass2");
});
});
</script>
<style>
.newclass1 {
font-size: xx-large;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3>Tutorialspoint</h3>
<p>Simply Easy Learning at your fingertips.</p>
<button>Click to add classes to elements</button>
</body>
</html>
Output
Execute the above program and click on the button to see the changes.
jQuery removeClass() Method
The jQuery removeClass() method removes one or more classes from the selected elements. If we do not specify any parameter to this method, it will remove all class names from the selected elements.
Syntax
Following is the syntax of jQuery removeClass() method −
$(selector).removeClass(classname);
The "classname" is a required parameter. It specifies one or more class names to be removed.
Example
In the following example, we are removing a class attribute from the heading and paragraph elements −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3, p").removeClass("green");
});
});
</script>
<style>
.green {
font-size: xx-large;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3 class="green">Tutorialspoint</h3>
<p class="green">Simply Easy Learning at your fingertips.</p>
<button>Click to remove classes from elements</button>
</body>
</html>
Output
Execute the above program and click on the button to see the changes.
jQuery toggleClass() Method
The jQuery toggleClass() method toggles between adding and removing classes from the selected elements.
Syntax
Following is the syntax of jQuery toggleClass() method −
$(selector).toggleClass(classname);
Example
In the example below, we are trying to toggle between adding/removing classes from selected elements using the jQuery toggleClass() method −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h3, p").toggleClass("green");
});
});
</script>
<style>
.green {
font-size: xx-large;
color: seagreen;
}
</style>
</head>
<body style="text-align: center;">
<h3 class="green">Tutorialspoint</h3>
<p class="green">Simply Easy Learning at your fingertips.</p>
<button>Click to toggle classes</button>
</body>
</html>
Output
Execute the above program and click on the button to see the toggling.
50 Views
