jQuery css() Method

The jQuery .css() method is a versatile tool used to get or set CSS properties of elements dynamically. It allows you to read the current style of an element or modify its style by applying inline CSS.

Syntax

1. Get CSS Property

$(selector).css(propertyName);

• propertyName: The name of the CSS property you want to retrieve.

2. Set CSS Property

$(selector).css(propertyName, value);

• propertyName: The name of the CSS property to set.
• value: The value to apply to the property.

3. Set Multiple CSS Properties

$(selector).css({
    property1: value1,
    property2: value2,
    ...
});

Examples

1. Getting a CSS Property

<div id="myDiv" style="color: red;">Hello, World!</div>
<button id="getColor">Get Color</button>

$("#getColor").click(function() {
    var color = $("#myDiv").css("color");
    alert("The color is: " + color);
});

2. Setting a CSS Property

<div id="myDiv">Change my color</div>
<button id="setColor">Set Color</button>

$("#setColor").click(function() {
    $("#myDiv").css("color", "blue");
});

3. Setting Multiple CSS Properties

<div id="myDiv">Style me</div>
<button id="setStyles">Set Styles</button>

$("#setStyles").click(function() {
    $("#myDiv").css({
        "color": "green",
        "background-color": "yellow",
        "font-size": "20px"
    });
});

Using Functions in .css()

You can pass a function as the value to dynamically calculate the property.

$("#myDiv").css("font-size", function(index, currentValue) {
    return parseInt(currentValue) + 2 + "px";
});

This increases the font size of #myDiv by 2px based on its current font size.

CSS Property Names in .css()

• Use camelCase for multi-word properties.
  • For example:
    • background-color → "backgroundColor"
    • font-size → "fontSize"
  • Example:

    $("#myDiv").css("backgroundColor", "blue");
    

    Try It Now

     

Working with Non-Numeric Values

If a CSS property has a non-numeric value (e.g., px, %, em), .css() includes it when getting the property value.

var width = $("#myDiv").css("width");
console.log(width); // Output: "300px" (includes units)

Practical Use Cases

1. Toggle Visibility

$("#toggleButton").click(function() {
    var currentDisplay = $("#myDiv").css("display");
    if (currentDisplay === "none") {
        $("#myDiv").css("display", "block");
    } else {
        $("#myDiv").css("display", "none");
    }
});

2. Dynamic Layout Adjustments

$("#increaseWidth").click(function() {
    $("#myDiv").css("width", function(index, value) {
        return parseInt(value) + 20 + "px";
    });
});

Advantages

1. Dynamic Styling: Easily update styles based on user interactions or conditions.
2. Batch Updates: Modify multiple properties at once for efficiency.
3. Chaining: Combine .css() with other jQuery methods in a single chain.

Limitations

1. Inline CSS Only: The .css() method sets styles as inline CSS, which may override external stylesheets.
2. Performance Impact: Repeated use can lead to performance issues in complex animations or large-scale DOM manipulations. Use .addClass() or .removeClass() when possible for better performance.

Summary

The jQuery .css() method is a powerful way to manipulate CSS properties dynamically. It can handle both individual and multiple properties, making it suitable for interactive and responsive web designs.