jQuery CSS manipulation
CSS manipulation in jQuery involves dynamically adding, removing, or modifying the styles and classes of HTML elements. This allows you to change the appearance of elements based on user interactions or other conditions. jQuery provides several methods to work with CSS styles and classes efficiently.
Adding and Removing Classes
1. addClass(): Add One or More Classes
The addClass() method adds one or more classes to the selected elements.
// Add a class to a div with ID "example"
$("#example").addClass("new-class");
Explanation:
$("#example").addClass("new-class")adds the classnew-classto the element with IDexample.
2. removeClass(): Remove One or More Classes
The removeClass() method removes one or more classes from the selected elements.
// Remove a class from a div with ID "example"
$("#example").removeClass("old-class");
Explanation:
$("#example").removeClass("old-class")removes the classold-classfrom the element with IDexample.
3. toggleClass(): Add or Remove a Class Based on Condition
The toggleClass() method adds or removes a class based on its current presence. Optionally, it can take a boolean value to explicitly add or remove the class.
// Toggle a class on a div with ID "example"
$("#example").toggleClass("toggle-class");
// Toggle a class based on a condition
$("#example").toggleClass("toggle-class", someCondition);
Explanation:
$("#example").toggleClass("toggle-class")adds the class if it's not present, or removes it if it is.$("#example").toggleClass("toggle-class", someCondition)adds or removes the class based on the value ofsomeCondition(true or false).
Styling Elements
1. css(): Get or Set CSS Styles
The css() method can be used to get the current computed style of an element or set new styles.
Setting Styles:
// Set multiple CSS properties for a div with ID "example"
$("#example").css({
"color": "red",
"background-color": "yellow",
"font-size": "20px"
});
Getting Styles:
// Get the color property of a div with ID "example"
var color = $("#example").css("color");
Explanation:
$("#example").css({...})sets multiple CSS properties for the selected element.$("#example").css("color")retrieves the value of thecolorproperty for the selected element.
Example Usage
Example: Adding, Removing, and Toggling Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Manipulation Example</title>
<style>
.highlight {
background-color: yellow;
}
.hidden {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#addClassButton").click(function() {
$("#example").addClass("highlight");
});
$("#removeClassButton").click(function() {
$("#example").removeClass("highlight");
});
$("#toggleClassButton").click(function() {
$("#example").toggleClass("hidden");
});
$("#changeStyleButton").click(function() {
$("#example").css({
"color": "blue",
"font-size": "24px"
});
});
});
</script>
</head>
<body>
<div id="example">This is an example div.</div>
<button id="addClassButton">Add Class</button>
<button id="removeClassButton">Remove Class</button>
<button id="toggleClassButton">Toggle Hidden</button>
<button id="changeStyleButton">Change Style</button>
</body>
</html>
Explanation:
- Clicking the "Add Class" button adds the
highlightclass to the#examplediv, changing its background color to yellow. - Clicking the "Remove Class" button removes the
highlightclass, reverting any styles applied by it. - Clicking the "Toggle Hidden" button toggles the
hiddenclass, which hides or shows the#examplediv based on its current state. - Clicking the "Change Style" button changes the text color to blue and the font size to 24px.
Performance Considerations
- Minimize Frequent Changes: Excessive changes to styles and classes can impact performance. Try to batch updates when possible.
- Use Efficient Selectors: Ensure that jQuery selectors are as specific as possible to reduce unnecessary operations.