How to Set CSS in jQuery?

jQuery provides a simple and efficient way to manipulate CSS properties dynamically. Whether you want to change styles on user interaction, apply animations, or modify multiple CSS properties at once, jQuery makes it easy.

In this blog, we’ll explore different ways to set CSS using jQuery, including single property changes, multiple property updates, and dynamic styling.

1. Setting a Single CSS Property in jQuery

To change a single CSS property, use the .css() method:

Example: Change Text Color

$(document).ready(function() {
    $("#example").css("color", "blue");
});

<p id="example">This text will turn blue.</p>

✔ This changes the text color of the element with id="example" to blue.

---

2. Setting Multiple CSS Properties

You can pass an object to .css() to apply multiple styles at once.

Example: Change Background, Font Size, and Padding

$(document).ready(function() {
    $("#box").css({
        "background-color": "lightgray",
        "font-size": "18px",
        "padding": "10px"
    });
});

<div id="box">Styled Box</div>

✔ This method is useful for batch styling elements.

---

3. Changing CSS on User Interaction

Use jQuery event listeners like .click(), .hover(), or .mouseenter() to dynamically change styles when users interact with elements.

Example: Change Background Color on Click

$(document).ready(function() {
    $("#button").click(function() {
        $(this).css("background-color", "green");
    });
});

<button id="button">Click Me</button>

✔ Clicking the button changes its background color to green.

---

4. Using Variables to Set Dynamic CSS Values

You can use variables to set dynamic values in jQuery.

Example: Increase Font Size Dynamically

$(document).ready(function() {
    let newSize = "24px";
    $("#text").css("font-size", newSize);
});

<p id="text">This text will have a dynamic font size.</p>

✔ This approach allows for dynamic styling based on logic or user input.

---

5. Adding and Removing CSS Classes Instead of Inline Styles

Using .addClass(), .removeClass(), or .toggleClass() is a better practice than using .css() when applying multiple styles.

Example: Toggle Dark Mode on Click

$(document).ready(function() {
    $("#toggle").click(function() {
        $("body").toggleClass("dark-mode");
    });
});

.dark-mode {
    background-color: black;
    color: white;
}

<button id="toggle">Toggle Dark Mode</button>

✔ This keeps styles organized in CSS rather than cluttering JavaScript with inline styles.

---

6. Animating CSS Changes with jQuery

jQuery’s .animate() method allows smooth transitions when changing numerical CSS properties.

Example: Expand a Box on Click

$(document).ready(function() {
    $("#expand").click(function() {
        $("#box").animate({
            width: "300px",
            height: "200px"
        }, 500);
    });
});

<button id="expand">Expand Box</button>
<div id="box" style="width:100px; height:100px; background:gray;"></div>

✔ This smoothly expands the box to 300px × 200px over 500 milliseconds.

---

Conclusion

To set CSS in jQuery:

✔ Use .css("property", "value") for single property changes.
✔ Use .css({ "property1": "value1", "property2": "value2" }) for multiple properties.
✔ Use event handlers like .click(), .hover(), or .mouseenter() for interactive styling.
✔ Use .addClass(), .removeClass(), and .toggleClass() for better CSS management.
✔ Use .animate() for smooth CSS transitions.