jQuery: css() Method

The css() method in jQuery allows you to get or set CSS properties for selected elements. It’s a powerful tool for dynamically applying styles and creating interactive web experiences.

At The Coding College, we’ll break down the usage of the css() method and how to implement it effectively.

What is the css() Method?

The css() method is used to:

  1. Get the value of a CSS property for the first matched element.
  2. Set one or multiple CSS properties for all matched elements.

Syntax

  • Get CSS Property 
$(selector).css(propertyName);
  • Set a Single CSS Property 
$(selector).css(propertyName, value);
  • Set Multiple CSS Properties 
$(selector).css({
    propertyName1: value1,
    propertyName2: value2,
});

Examples

1. Get a CSS Property

<div id="example" style="color: red;">Hello, World!</div>
<script>
    let color = $("#example").css("color");
    console.log(color); // Output: "rgb(255, 0, 0)"
</script>

2. Set a Single CSS Property

<div id="example">Hello, World!</div>
<script>
    $("#example").css("color", "blue");
    // Output: The text color changes to blue.
</script>

3. Set Multiple CSS Properties

<div id="example">Hello, World!</div>
<script>
    $("#example").css({
        color: "green",
        fontSize: "20px",
        backgroundColor: "yellow",
    });
    // Output: The text is green, font size is 20px, and the background is yellow.
</script>

Practical Examples

1. Change Style on Hover

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
    $("#box").hover(
        function () {
            $(this).css("background-color", "blue");
        },
        function () {
            $(this).css("background-color", "red");
        }
    );
</script>

2. Create Dynamic Animations

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
    $("#box").click(function () {
        $(this).css({
            width: "200px",
            height: "200px",
            transition: "all 0.5s",
        });
    });
</script>

3. Responsive Design Adjustments

$(window).resize(function () {
    let width = $(window).width();
    $("body").css("font-size", width > 768 ? "18px" : "14px");
});

Best Practices

  1. Avoid Inline CSS for Large Projects: Use external stylesheets for better maintainability.
  2. Combine with Classes: Use .addClass() or .removeClass() for frequently toggled styles.
  3. Keep CSS Values Dynamic: Use variables or calculations for responsive designs.

Common Use Cases

Use CaseExample
Dynamic StylingChange colors, sizes, or visibility based on user interaction.
ThemingApply different themes to elements dynamically.
AnimationsAdjust properties like width, height, or opacity dynamically.
Responsive AdjustmentsChange styles based on screen size or other environmental factors.

Advanced Usage

1. Get Multiple CSS Properties

let styles = $("#example").css(["color", "font-size"]);
console.log(styles.color);      // Output: CSS value for color
console.log(styles.fontSize);   // Output: CSS value for font-size

2. Set Calculated Values

$("#example").css("width", function (index, value) {
    return parseInt(value) + 50 + "px";
});

Conclusion

The css() method in jQuery offers a versatile way to manipulate the appearance of web elements dynamically. Whether you’re creating animations, theming, or responsive designs, this method is essential for any web developer.

Leave a Comment