Mastering jQuery: Adding and Removing Classes & CSS with Valid Examples
Are you looking for Live Training in C#?
The upcoming batch for C#.NET is sceduled.
Book Your Seat Now.
jQuery, a fast and feature-rich JavaScript library, makes it easier to handle HTML document manipulation, event handling, and animation. One of its powerful features is the ability to dynamically add, remove, and manipulate CSS classes and styles. In this blog, we’ll explore how to use jQuery to add and remove classes, as well as manipulate CSS styles with valid examples.
Adding and Removing Classes with jQuery
Adding Classes
The .addClass() method in jQuery is used to add one or more classes to the selected elements. This method can take a single class name, multiple class names separated by spaces, or even a function that returns class names.
Syntax
$(selector).addClass(className);
$(selector).addClass(function(index, currentClass));
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Add Class Example</title>
<style>
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text">This is a sample paragraph.</p>
<button id="btn-add">Add Class</button>
<script>
$(document).ready(function() {
$("#btn-add").click(function() {
$("#text").addClass("highlight bold");
});
});
</script>
</body>
</html>
In this example, clicking the “Add Class” button adds the highlight and bold classes to the paragraph, changing its background color to yellow and making the text bold.
Removing Classes
The .removeClass() method in jQuery removes one or more classes from the selected elements. Similar to .addClass(), it can take a single class name, multiple class names separated by spaces, or a function that returns class names.
Syntax
$(selector).removeClass(className);
$(selector).removeClass(function(index, currentClass));
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Remove Class Example</title>
<style>
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text" class="highlight bold">This is a sample paragraph.</p>
<button id="btn-remove">Remove Class</button>
<script>
$(document).ready(function() {
$("#btn-remove").click(function() {
$("#text").removeClass("highlight bold");
});
});
</script>
</body>
</html>
In this example, clicking the “Remove Class” button removes the highlight and bold classes from the paragraph, reverting its background color and text weight to their original states.
Toggling Classes
The .toggleClass() method adds or removes one or more classes from each element in the set of matched elements, depending on whether the class is present or not.
Syntax
$(selector).toggleClass(className);
$(selector).toggleClass(function(index, className, state));
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 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">Click the button to toggle highlight.</p>
<button id="btn-toggle">Toggle Class</button>
<script>
$(document).ready(function() {
$("#btn-toggle").click(function() {
$("#text").toggleClass("highlight");
});
});
</script>
</body>
</html>
In this example, clicking the “Toggle Class” button adds the highlight class if it is not present and removes it if it is, toggling the background color of the paragraph.
Are you looking for Live Training in C#?
The upcoming batch for C#.NET is sceduled.
Book Your Seat Now.
Manipulating CSS with jQuery
Adding CSS Styles
The .css() method in jQuery sets one or more CSS properties for the selected elements. It can be used to apply styles dynamically based on certain conditions or user interactions.
Syntax
$(selector).css(propertyName, value);
$(selector).css({
property1: value1,
property2: value2,
...
});
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery CSS Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text">This is a sample paragraph.</p>
<button id="btn-style">Apply CSS</button>
<script>
$(document).ready(function() {
$("#btn-style").click(function() {
$("#text").css({
"color": "blue",
"font-size": "20px",
"border": "1px solid black"
});
});
});
</script>
</body>
</html>
In this example, clicking the “Apply CSS” button changes the text color to blue, the font size to 20 pixels, and adds a black border to the paragraph.
Removing CSS Styles
To remove CSS styles, you can use the .css() method to set the property value to an empty string.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Remove CSS Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text" style="color: blue; font-size: 20px; border: 1px solid black;">This is a sample paragraph.</p>
<button id="btn-remove-style">Remove CSS</button>
<script>
$(document).ready(function() {
$("#btn-remove-style").click(function() {
$("#text").css({
"color": "",
"font-size": "",
"border": ""
});
});
});
</script>
</body>
</html>
In this example, clicking the “Remove CSS” button removes the inline styles applied to the paragraph.
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Class and CSS Manipulation</title>
<style>
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text">This is a sample paragraph.</p>
<button id="btn-add">Add Class</button>
<button id="btn-remove">Remove Class</button>
<button id="btn-toggle">Toggle Class</button>
<button id="btn-style">Apply CSS</button>
<button id="btn-remove-style">Remove CSS</button>
<script>
$(document).ready(function() {
// Add classes
$("#btn-add").click(function() {
$("#text").addClass("highlight bold");
});
// Remove classes
$("#btn-remove").click(function() {
$("#text").removeClass("highlight bold");
});
// Toggle class
$("#btn-toggle").click(function() {
$("#text").toggleClass("highlight");
});
// Apply CSS
$("#btn-style").click(function() {
$("#text").css({
"color": "blue",
"font-size": "20px",
"border": "1px solid black"
});
});
// Remove CSS
$("#btn-remove-style").click(function() {
$("#text").css({
"color": "",
"font-size": "",
"border": ""
});
});
});
</script>
</body>
</html>
By following this guide, you should now have a solid understanding of how to manipulate classes and CSS styles using jQuery.
Conclusion
jQuery provides powerful methods for dynamically manipulating classes and CSS styles, making it easier to create interactive and visually appealing web applications. By understanding and using .addClass(), .removeClass(), .toggleClass(), and .css(), you can enhance the user experience on your website.
Are you looking for Live Training in C#?
The upcoming batch for C#.NET is sceduled.
Book Your Seat Now.