The CSSStyleDeclaration interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.
A CSSStyleDeclaration object can be exposed using three different APIs:
- Via
HTMLElement.style, which deals with the inline styles of a single element (e.g., <div style="…">).
- Via the
CSSStyleSheet API. For example, document.styleSheets[0].cssRules[0].style returns a CSSStyleDeclaration object on the first CSS rule in the document's first stylesheet.
- Via
Window.getComputedStyle(), which exposes the CSSStyleDeclaration object as a read-only interface.
Attributes
-
CSSStyleDeclaration.cssText
-
Textual representation of the declaration block, if and only if it is exposed via HTMLElement.style. Setting this attribute changes the inline style. If you want a text representation of a computed declaration block, you can get it with JSON.stringify().
CSSStyleDeclaration.length Read only
-
The number of properties. See the item() method below.
CSSStyleDeclaration.parentRule Read only
-
The containing CSSRule.
CSS Properties
-
CSSStyleDeclaration.cssFloat
-
Special alias for the float CSS property.
-
CSSStyleDeclaration named properties
-
Dashed and camel-cased attributes for all supported CSS properties.
Instance methods
-
CSSStyleDeclaration.getPropertyPriority()
-
Returns the optional priority, "important".
-
CSSStyleDeclaration.getPropertyValue()
-
Returns the property value given a property name.
-
CSSStyleDeclaration.item()
-
Returns a CSS property name by its index, or the empty string if the index is out-of-bounds.
-
CSSStyleDeclaration.removeProperty()
-
Removes a property from the CSS declaration block.
-
CSSStyleDeclaration.setProperty()
-
Modifies an existing CSS property or creates a new CSS property in the declaration block.
CSSStyleDeclaration.getPropertyCSSValue() Deprecated
-
Only supported via getComputedStyle in Firefox. Returns the property value as a CSSPrimitiveValue or null for shorthand properties.
Example
const styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);
for (let i = styleObj.length; i--; ) {
const nameString = styleObj[i];
styleObj.removeProperty(nameString);
}
console.log(styleObj.cssText);
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
@@iterator |
51 |
18 |
36 |
No |
38 |
11 |
51 |
51 |
36 |
41 |
11 |
5.0 |
CSSStyleDeclaration |
1 |
12 |
1 |
5 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
cssFloat |
1 |
12 |
1–17 |
9 |
≤12.1 |
1 |
4.4 |
18 |
4–17 |
≤12.1 |
1 |
1.0 |
cssText |
1 |
12 |
1 |
5 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
getPropertyCSSValue |
1–40 |
No |
1–61Only returns a result if called on the result of getComputedStyle().
|
No |
15–27 |
1 |
4.4–41 |
18–40 |
4–61 |
14–27 |
1 |
1.0–4.0 |
getPropertyPriority |
1 |
12 |
1 |
9 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
getPropertyValue |
1 |
12 |
1 |
9 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
item |
1 |
12 |
1 |
9 |
≤12.1 |
6 |
4.4 |
18 |
4 |
≤12.1 |
6 |
1.0 |
length |
1 |
12 |
1 |
9 |
≤12.1 |
6 |
4.4 |
18 |
4 |
≤12.1 |
6 |
1.0 |
parentRule |
1 |
12 |
1 |
9 |
15 |
1 |
4.4 |
18 |
4 |
14 |
1 |
1.0 |
removeProperty |
1 |
12 |
1 |
9 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
setProperty |
1 |
12 |
1 |
9 |
9 |
6 |
4.4 |
18 |
4 |
10.1 |
6 |
1.0 |