jQuery CSS Manipulation
jQuery provides powerful and easy-to-use methods to work with CSS. Whether
you're adding styles, removing them, or toggling between classes, jQuery
makes it simple. Below are some commonly used methods for CSS
manipulation:
- addClass() – Adds one or more CSS classes to selected elements.
- removeClass() – Removes one or more CSS classes from selected elements.
- toggleClass() – Adds a class if it's missing, or removes it if it's already present.
- css() – Gets or sets the value of a specific CSS property.
Example CSS
The examples below will use the following stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>CSS Class Example</title>
<style>
/* Make text bold and extra large */
.important {
font-weight: bold;
font-size: xx-large;
}
/* Make text blue */
.blue {
color: blue;
}
</style>
</head>
<body>
<p class="important">This text is bold and extra large.</p>
<p class="blue">This text is blue.</p>
<p class="important blue">This text is both bold, extra large, and blue.</p>
</body>
</html>
These styles help visually demonstrate how jQuery methods apply different
effects to elements by manipulating their classes and styles
dynamically.
jQuery addClass() Method
The addClass() method is used to add one or more CSS classes to selected
elements. You can target multiple elements at once and apply styles
dynamically.
Example
In the example below, when a button is clicked:
- All <h1>, <h2>, and <p> elements receive the class blue.
- All <div> elements are given the class important.
<!DOCTYPE html>
<html>
<head>
<title>jQuery addClass Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* CSS classes */
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<div>This is a div element.</div>
<br>
<button>Apply Classes</button>
<script>
$("button").click(function(){
$("h1, h2, p").addClass("blue"); // Make headings and paragraph blue
$("div").addClass("important"); // Make div bold and extra large
});
</script>
</body>
</html>
This approach allows you to apply consistent styling across multiple
elements with just a single jQuery method call.
You can also apply multiple CSS classes at once using the addClass()
method. Simply separate the class names with a space inside the
string.
Example
In the following code, when the button is clicked, the element with the
ID div1 is given both the important and blue classes:
<!DOCTYPE html>
<html>
<head>
<title>jQuery addClass Simple Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div id="div1">This is a div.</div>
<button>Make Important and Blue</button>
<script>
$("button").click(function(){
$("#div1").addClass("important blue"); // Add both classes at once
});
</script>
</body>
</html>
This makes it easy to combine multiple styles in a single method call
for more flexible design control.
jQuery removeClass() Method
The removeClass() method is used to remove one or more CSS classes
from the selected elements. It's useful when you want to dynamically
reset or change styles.
Example
In this example, clicking the button will remove the blue class from
all <h1>, <h2>, and <p> elements:
<!DOCTYPE html>
<html>
<head>
<title>jQuery removeClass Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>
<p class="blue">This is a paragraph.</p>
<button>Remove Blue Class</button>
<script>
$("button").click(function(){
$("h1, h2, p").removeClass("blue"); // Remove the blue class
});
</script>
</body>
</html>
This allows you to cleanly revert or update styling on the fly.
jQuery toggleClass() Method
The toggleClass() method is a convenient way to add or remove a
class from selected elements. If the class is present, it will be
removed; if it's not, it will be added. This is especially useful
for creating toggle effects with styling.
Example
In the example below, clicking the button will toggle the blue
class on all <h1>, <h2>, and <p> elements:
<!DOCTYPE html>
<html>
<head>
<title>jQuery toggleClass Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<button>Toggle Blue Class</button>
<script>
$("button").click(function(){
$("h1, h2, p").toggleClass("blue"); // Toggle the blue class
});
</script>
</body>
</html>
This allows you to easily switch styles on and off with a single
line of code.
More topic in jQuery
