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 to add a new class to an element that already has a class using jQuery?
jQuery is a well-known JavaScript library that makes it easier to manipulate HTML elements, handle events, and carry out numerous operations on web pages. Adding or changing HTML element classes can also be done using jQuery.
Using it, we can easily add a new class to an element that already has one or more classes. This enables you to combine many styles or actions on a single element without deleting any already-existing classes. Let’s dive into the article to learn about adding a new class to an element that already has a class. This can be done by using the addClass() method.
jQuery addClass() Method
To add one or more class names to the chosen element, we use the addClass() method. This method is only employed to add one or more class names to the class attributes, but never to get rid of any already existing ones. If you wish to add multiple classes, separate the names of each class by a space.
Syntax
Following is the syntax for jQuery addClass() method
$(selector).addClass(classname,function(index,currentclass))
Example
In the following example, we are going to implement the addClass() method on the heading text and observe the changes.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
font-size: 25px;
color: #DE3163;
text-align: center;
font-family: verdana;
border: 1px solid #5B2C6F;
}
.x {
margin: 50px;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<h2>TUTORIALSPOINT</h2>
<button id="tp">Click to trigger method</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#tp").click(function() {
$("h2").addClass("tutorial x");
});
});
</script>
</body>
</html>
When we execute the above script, it will generate an output consisting of text and a button on the webpage. When the user clicks the button, the event gets triggered and applies CSS to the text.
Example
Considering another example where we are going to use the addClass() method using a function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
p {
margin: 4px;
font-size: 20px;
font-family: verdana;
}
.x {
background: #D5F5E3;
}
.listitem_1,
.listitem_2 {
color: #DE3163;
}
.listitem_0,
.listitem_3 {
color: #6C3483;
}
</style>
</head>
<body>
<ol>
<h1>List of Cars</h1>
<li>
<p class="x">RS7</p>
</li>
<li>
<p class="x">BUGATI</p>
</li>
<li>
<p class="x">CHERON</p>
</li>
<li>
<p class="x">MAYBACH</p>
</li>
</ol>
<button>Click to trigger method</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("li").addClass(function(n) {
return "listitem_" + n;
});
});
});
$("p").click(function() {
$(this).addClass("x");
});
</script>
</body>
</html>
On executing the above script, the output window will pop up, displaying the list items along with a button on the webpage. When the user clicks the button, the event gets triggered and applies CSS to the list elements.
Example
Let’s look at the following example, where we are going to remove the existing effects and add the new effects using the addClass() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.x {
font-size: 20px;
color: #5B2C6F;
background-color: #D6EAF8;
border: 2px solid #C0392B;
text-align: center;
}
.y {
background-color: #D5F5E3;
color: #DE3163;
font-family: verdana;
}
</style>
</head>
<body>
<p class="x">WELCOME</p>
<button>Click to trigger method</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").removeClass("x").addClass("y");
});
});
</script>
</body>
</html>
When we execute the above script, it will generate an output consisting of the text applied with CSS and a click button displayed on the webpage. When the user clicks the button, the event gets triggered, which removes the previous applied CSS and applies the new one.
12 Views
