## CSSStyleDeclaration setProperty() Method
The `setProperty()` method of the `CSSStyleDeclaration` interface allows you to set a new CSS property or modify an existing CSS property within a CSS declaration block.
---
## Definition and Usage
The `setProperty()` method is used to dynamically apply or update CSS styles on an element or within a stylesheet rule. Unlike direct property assignment (e.g., `element.style.color = "red"`), `setProperty()` supports setting the `!important` priority flag and uses standard CSS property names (kebab-case) rather than camelCase.
---
## Syntax
```javascript
styleDeclaration.setProperty(propertyName, value, priority);
```
### Parameters
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `propertyName` | *String* | **Required.** A string representing the CSS property name to be modified (e.g., `"background-color"`, `"font-size"`). |
| `value` | *String* | **Optional.** A string containing the new property value. If not specified, it defaults to an empty string (`""`). |
| `priority` | *String* | **Optional.** A string allowing the `"important"` priority to be set. It can be:
• `"important"`
• `undefined`
• `""` (empty string) |
### Return Value
* **`undefined`** (This method does not return a value).
---
## Technical Details
| Feature | Specification |
| :--- | :--- |
| **DOM Version** | CSS Object Model (CSSOM) |
| **Browser Support** | Chrome (Yes), Edge/IE (9.0+), Firefox (Yes), Safari (Yes), Opera (Yes) |
---
## Code Examples
### Example 1: Setting a Basic CSS Property on an Inline Style
This is the most common use case: modifying the inline styles of a specific HTML element.
```html
Hello World
```
### Example 2: Modifying a Stylesheet Rule
You can also use `setProperty()` to modify styles directly within an external or internal stylesheet.
```javascript
// Access the first style rule of the first stylesheet on the page
var declaration = document.styleSheets.cssRules.style;
// Set a new background color
declaration.setProperty("background-color", "yellow");
```
### Example 3: Using the `!important` Priority
To override other style declarations, you can pass `"important"` as the third parameter.
```javascript
var declaration = document.styleSheets.cssRules.style;
// Set the background color to yellow with !important priority
declaration.setProperty("background-color", "yellow", "important");
```
### Example 4: Working with CSS Custom Properties (Variables)
`setProperty()` is the standard way to dynamically update CSS variables at runtime.
```html
```
---
## Considerations & Best Practices
1. **Kebab-case vs. CamelCase**: When using `setProperty()`, you must use standard CSS property names (e.g., `"background-color"`). If you use direct property assignment, you must use camelCase (e.g., `element.style.backgroundColor`).
2. **CSS Variables**: `setProperty()` is highly useful because it is the only standard way to dynamically set CSS custom properties (variables) via JavaScript.
3. **Removing Properties**: To remove a property, it is recommended to use the `removeProperty()` method instead of setting the value to an empty string.
YouTip