YouTipObj Cssstyledeclaration
## CSSStyleDeclaration Object
The `CSSStyleDeclaration` object represents a collection of CSS property-value pairs. It is commonly used to retrieve, modify, or remove inline styles of an HTML element, or to manipulate CSS rules within a stylesheet.
---
## Accessing the CSSStyleDeclaration Object
There are two primary ways to obtain a `CSSStyleDeclaration` object in JavaScript:
1. **Via the element's inline style:**
```javascript
const element = document.getElementById("myElement");
const styleDeclaration = element.style;
```
2. **Via computed styles (read-only):**
```javascript
const element = document.getElementById("myElement");
const computedStyle = window.getComputedStyle(element);
```
---
## CSSStyleDeclaration Properties
| Property | Description |
| :--- | :--- |
| [`cssText`](#csstext) | Sets or returns the text representation of the CSS style declaration block. This corresponds directly to the HTML element's `style` attribute. |
| [`length`](#length) | Returns the number of CSS properties defined in the declaration block. |
| [`parentRule`](#parentrule) | Returns the containing CSS rule (e.g., a `CSSStyleRule` object) if the declaration belongs to a stylesheet. Returns `null` for inline styles. |
---
## CSSStyleDeclaration Methods
| Method | Description |
| :--- | :--- |
| [`getPropertyPriority(propertyName)`](#getpropertypriority) | Returns whether the specified CSS property has the `"important"` priority set (i.e., `!important`). |
| [`getPropertyValue(propertyName)`](#getpropertyvalue) | Returns the value of the specified CSS property. |
| [`item(index)`](#item) | Returns the CSS property name at the specified index. |
| [`removeProperty(propertyName)`](#removeproperty) | Removes a CSS property from the declaration block. |
| [`setProperty(propertyName, value, priority)`](#setproperty) | Creates a new CSS property or modifies an existing one in the declaration block. |
---
## Detailed Property & Method Examples
### cssText, length, and item()
The following example demonstrates how to read the entire style block as text, count the properties, and iterate through them using their index.
```javascript
const element = document.getElementById("box");
// Set multiple styles at once using cssText
element.style.cssText = "color: red; background-color: yellow; font-size: 16px;";
// Get the cssText
console.log(element.style.cssText);
// Output: "color: red; background-color: yellow; font-size: 16px;"
// Get the number of properties
console.log(element.style.length);
// Output: 3
// Iterate through properties using item()
for (let i = 0; i < element.style.length; i++) {
const propName = element.style.item(i); // or element.style
console.log(`${propName}: ${element.style.getPropertyValue(propName)}`);
}
```
### setProperty(), getPropertyValue(), and removeProperty()
These methods provide a robust, standard way to manipulate individual CSS properties.
```javascript
const element = document.getElementById("box");
// 1. Set a property (with optional '!important' priority)
element.style.setProperty("background-color", "blue", "important");
// 2. Get a property value
const bgColor = element.style.getPropertyValue("background-color");
console.log(bgColor); // Output: "blue"
// Check if the property has '!important' priority
const isImportant = element.style.getPropertyPriority("background-color");
console.log(isImportant); // Output: "important"
// 3. Remove a property
element.style.removeProperty("background-color");
```
---
## Key Considerations
* **CamelCase vs. Kebab-case:**
When accessing styles directly as properties on the `style` object (e.g., `element.style.backgroundColor`), you must use **camelCase**. However, when using methods like `setProperty()`, `getPropertyValue()`, and `removeProperty()`, you must use standard **kebab-case** CSS property names (e.g., `"background-color"`).
* **Inline Styles vs. Computed Styles:**
Modifying properties via `element.style` only affects the element's **inline** styles. To read the actual styles applied to an element by external or internal stylesheets, use `window.getComputedStyle(element)`. Note that the `CSSStyleDeclaration` returned by `getComputedStyle` is **read-only**.