## jQuery css() Method
The jQuery `css()` method is a versatile and powerful tool used to get or set one or more style properties for the selected elements. It acts as a direct bridge between your JavaScript logic and the visual presentation of your web page.
---
## Definition and Usage
The `css()` method operates in two primary modes depending on the arguments passed to it:
* **To Get a Property Value:** When called with a single property name, it returns the computed value of that CSS property for the **first** matched element in the selection.
* **To Set Property Values:** When called with a property name and value (or an object of key-value pairs), it applies the specified CSS styles to **all** matched elements in the selection.
> **Note on Shorthand Properties:** Shorthand CSS properties (such as `background` and `border`) are not fully supported when retrieving values. Different browsers may return different results (e.g., one browser might return the full border shorthand string, while another returns empty or specific sub-properties). For consistent cross-browser results, retrieve specific properties like `background-color` or `border-width` instead.
---
## Syntax
The `css()` method supports four different syntax signatures:
### 1. Get a CSS Property Value
Returns the computed style of the specified CSS property for the first matched element.
```javascript
$(selector).css(property)
```
### 2. Set a Single CSS Property and Value
Sets a single CSS property to a specified value for all matched elements.
```javascript
$(selector).css(property, value)
```
### 3. Set a CSS Property Using a Callback Function
Sets a CSS property to a value returned by a custom function.
```javascript
$(selector).css(property, function(index, currentValue))
```
### 4. Set Multiple CSS Properties and Values
Sets multiple CSS properties simultaneously using an object containing key-value pairs.
```javascript
$(selector).css({ property: value, property: value, ... })
```
### Parameter Details
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `property` | *String* | Specifies the CSS property name (e.g., `"color"`, `"font-weight"`, `"background-color"`). |
| `value` | *String \| Number* | Specifies the value to apply to the CSS property (e.g., `"red"`, `"bold"`, `"15px"`). If a number is passed without a unit, jQuery automatically appends `"px"` where applicable. |
| `function(index, currentValue)` | *Function* | A callback function that returns the new property value.
• `index` - The index position of the element in the set.
• `currentValue` - The current CSS property value of the element. |
---
## Code Examples
### Example 1: Set a Single CSS Property
This example changes the text color of all `
` elements to red when a button is clicked.
```javascript
$("button").click(function(){
$("p").css("color", "red");
});
```
### Example 2: Get a CSS Property Value
This example retrieves and alerts the background color of the first matched `
` element.
```javascript
$("button").click(function(){
var bgColor = $("div").css("background-color");
alert("Background color is: " + bgColor);
});
```
### Example 3: Set Multiple CSS Properties
You can pass a JavaScript object to set multiple CSS properties at once. You can use either camelCase (e.g., `backgroundColor`) or kebab-case in quotes (e.g., `"background-color"`).
```javascript
$("button").click(function(){
$("p").css({
"background-color": "yellow",
"font-size": "200%",
"padding": "10px"
});
});
```
### Example 4: Use a Callback Function to Set a Property
This example dynamically increases the font size of each `
` element based on its index position.
```javascript
$("button").click(function(){
$("p").css("font-size", function(index, currentValue){
// Increase the font size of each subsequent paragraph
return (index * 5) + 16 + "px";
});
});
```
---
## Best Practices & Considerations
1. **CamelCase vs. Kebab-Case:** jQuery accepts both standard CSS property names in quotes (e.g., `"background-color"`) and DOM style camelCase properties (e.g., `backgroundColor`).
2. **Automatic "px" Addition:** For properties that accept pixel values (like `width`, `height`, `margin`, `padding`, etc.), if you pass a raw number as the value, jQuery will automatically append `"px"` to it (e.g., `.css("width", 300)` becomes `width: 300px`).
3. **Performance Tip:** If you need to apply a large number of styles or toggle complex layouts, it is generally more performant and maintainable to define classes in your CSS file and toggle them using jQuery's `.addClass()`, `.removeClass()`, or `.toggleClass()` methods instead of writing inline styles via `.css()`.
YouTip