Using the addClass() and removeClass() Methods
The addClass() and removeClass() methods are used to add and remove CSS classes, respectively. These methods help in modifying the style of HTML elements dynamically without modifying the HTML or CSS files directly.
Syntax
addClass() Method
$(selector).addClass(className);
- selector: Specifies the HTML element to which the class will be added.
- className: The CSS class that will be added to the selected element.
removeClass() Method
$(selector).removeClass(className);
- selector: Specifies the HTML element from which the class will be removed.
- className: The CSS class that will be removed from the selected element.
Example
Using addClass() and removeClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery addClass and removeClass Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="text">This is a sample text.</p>
<button id="add">Add Class</button>
<button id="remove">Remove Class</button>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("#text").addClass("highlight");
});
$("#remove").click(function() {
$("#text").removeClass("highlight");
});
});
</script>
</body>
</html>
Output Explanation
- Clicking the "Add Class" button adds the highlight class to the paragraph, changing its background color to yellow and making the text bold.
- Clicking the "Remove Class" button removes the highlight class, restoring the paragraph to its default style.
Using the toggleClass() Method
The toggleClass() method is a combination of addClass() and removeClass(). It adds the class if it is not present and removes it if it is already applied.
Syntax
$(selector).toggleClass(className);
- selector: Specifies the HTML element to modify.
- className: The CSS class to be toggled.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery toggleClass Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: lightblue;
font-weight: bold;
}
</style>
</head>
<body>
<p id="text">Click the button to toggle class.</p>
<button id="toggle">Toggle Class</button>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#text").toggleClass("highlight");
});
});
</script>
</body>
</html>
Output Explanation
- Clicking the "Toggle Class" button adds the highlight class if it is not present, applying the light blue background and bold text.
- Clicking the button again removes the highlight class, restoring the default style.
jQuery CSS Classes Manipulation
jQuery provides a simple way to manipulate CSS classes, making it easier to control the styling of elements on your webpage. Let’s take a look at the three main methods for class manipulation: `.addClass()`, `.removeClass()`, & `.toggleClass()`.
1. Adding a Class with `.addClass()`
The `.addClass()` method is used to add one or more classes to an element. You can add multiple classes by separating them with a space.
Syntax
$(selector).addClass(className);
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Class Example</title>
<style>
.highlight {
background-color: yellow;
}
.large-text {
font-size: 24px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text">This is a sample text.</p>
<button id="addClassBtn">Add Classes</button>
<script>
$(document).ready(function() {
$("addClassBtn").click(function() {
$("text").addClass("highlight large-text");
});
});
</script>
</body>
</html>
Explanation:
- When the button is clicked, the `highlight` & `large-text` classes are added to the paragraph.
- The text will now have a yellow background & a larger font size.
2. Removing a Class with `.removeClass()`
The `.removeClass()` method removes one or more classes from an element. If no class name is specified, it removes all classes.
Syntax
$(selector).removeClass(className);
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Class Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text" class="highlight">This is a sample text.</p>
<button id="removeClassBtn">Remove Class</button>
<script>
$(document).ready(function() {
$("removeClassBtn").click(function() {
$("text").removeClass("highlight");
});
});
</script>
</body>
</html>
Explanation:
- The paragraph initially has the `highlight` class, which gives it a yellow background.
- When the button is clicked, the `highlight` class is removed, & the yellow background disappears.
3. Toggling a Class with `.toggleClass()`
The `.toggleClass()` method adds a class if it’s not present & removes it if it is. This is useful for creating toggle effects.
Syntax:
$(selector).toggleClass(className);
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Class Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text">This is a sample text.</p>
<button id="toggleClassBtn">Toggle Class</button>
<script>
$(document).ready(function() {
$("toggleClassBtn").click(function() {
$("text").toggleClass("highlight");
});
});
</script>
</body>
</html>
Explanation:
- Each time the button is clicked, the `highlight` class is toggled on or off.
- If the paragraph has the `highlight` class, it will be removed. If it doesn’t have the class, it will be added.
These methods are powerful tools for dynamically changing the appearance of elements on your webpage. They are easy to use & can be combined to create complex interactions.
Frequently Asked Questions
What is the difference between addClass() and toggleClass()?
addClass() only adds a class, whereas toggleClass() alternates between adding and removing the class based on its current state.
Can we add multiple classes using addClass()?
Yes, you can add multiple classes by separating them with spaces, like this:
$("#text").addClass("class1 class2 class3");
What happens if I call removeClass() on an element that doesn’t have the class?
Nothing will happen; removeClass() only removes the class if it is present, otherwise, it does nothing.
Conclusion
In this article, we will learn how to add or remove classes in jQuery. jQuery provides easy-to-use methods for manipulating CSS classes, allowing developers to enhance user interactivity and control the styling of elements. The addClass() method is used to add a class, while the removeClass() method removes a class from an element.
