Styling elements in your web page is a critical part of web development. While CSS is the primary tool for
styling, sometimes you may want to add or modify styles dynamically based on user interactions or other
conditions. In such cases, jQuery can be a powerful tool for modifying the style of elements on your web page
with ease.
In this blog post, we will discuss how to add style with jQuery by covering the following topics:
- Adding inline styles using the css() method
- Adding and removing classes using the addClass() and removeClass()
methods - Toggling classes using the toggleClass() method
Prerequisites
To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and jQuery. Also, make
sure you have the jQuery library included in your project. You can include it using the following script tag in
your HTML file:
<>
1. Adding inline styles using the css() method
The css() method in jQuery allows you to get or set the style properties of elements. To set an
inline style for an element, you can use the following syntax:
<>$(“selector”).css(“property”, “value”);
For example, if you want to change the color of all paragraphs to red, you would write:
<>$(“p”).css(“color”, “red”);
To set multiple inline styles at once, you can pass an object as an argument to the css()
method:
<>$(“selector”).css({
“property1”: “value1”,
“property2”: “value2”,
…
});
For example, to set the font size and background color of all paragraphs, you would write:
<>$(“p”).css({
“font-size”: “16px”,
“background-color”: “lightblue”
});
2. Adding and removing classes using the addClass() and removeClass() methods
Sometimes, it’s better to define styles in a CSS class and then add or remove the class to/from an element using
jQuery. This can make your code more organized and easier to maintain.
To add a class to an element, use the addClass() method:
<>$(“selector”).addClass(“class-name”);
For example, if you have the following CSS class:
<>.highlight {
background-color: yellow;
font-weight: bold;
}
You can add the highlight class to all paragraphs with the following code:
<>$(“p”).addClass(“highlight”);
Similarly, to remove a class from an element, use the removeClass() method:
<>$(“selector”).removeClass(“class-name”);
For example, to remove the highlight class from all paragraphs:
<>$(“p”).removeClass(“highlight”);
3. Toggling classes using the toggleClass() method
If you want to add a class to an element if it’s not present, and remove it if it’s already present, you can use
the toggleClass() method. This method is useful when you want to toggle a certain style based
on user interactions, such as clicking a button.
<>$(“selector”).toggleClass(“class-name”);
For example, let’s say you have a button with an ID of #toggle-highlight and you want to toggle
the highlight class on all paragraphs when the button is clicked:
<>$(“#toggle-highlight”).click(function() {
$(“p”).toggleClass(“highlight”);
});
This will add the highlight class to all paragraphs if it’s not present, and remove it if it’s
already present, every time the button is clicked.
Conclusion
In this blog post, we’ve covered several ways to add style with jQuery, including using the css()
method for inline styles, and the addClass(), removeClass(), and
toggleClass() methods for adding, removing, and toggling CSS classes. With these methods, you
can easily modify the style of elements on your web page dynamically based on user interactions or other
conditions.
