CSSStyleDeclaration

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.lengthRead only

The number of properties. See the item() method below.

CSSStyleDeclaration.parentRuleRead 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.

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()

Only supported via getComputedStyle in Firefox. Returns the property value as a CSSPrimitiveValue or null for shorthand properties.

Example

var styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (var i = styleObj.length; i--;) {
  var 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
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-61
Only 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
Yes
1.0
length
44
12
1
9
≤12.1
6
4.4
18
4
≤12.1
Yes
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
@@iterator
51
18
36
No
38
11
51
51
36
41
11
5.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration