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. Setting this attribute changes the style.
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.
An alternative to accessing nodeList[i] (which instead returns undefined when i is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.
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

Specification Status Comment
CSS Object Model (CSSOM)
The definition of 'CSSStyleDeclaration' in that specification.
Working Draft Merged the DOM Level 2 Style CSS2Properties interface into CSSStyleDeclaration.
Document Object Model (DOM) Level 2 Style Specification
The definition of 'CSSStyleDeclaration' in that specification.
Obsolete Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
CSSStyleDeclarationChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
cssFloatChrome Full support 46Edge Full support 12Firefox No support NoIE ? Opera Full support YesSafari Full support 11WebView Android Full support 46Chrome Android Full support 46Firefox Android No support NoOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
cssTextChrome Full support 1Edge Full support 12Firefox Full support 1IE ? Opera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
getPropertyCSSValue
Deprecated
Chrome No support ? — 41
Notes
No support ? — 41
Notes
Notes See bug 331608.
Edge No support No
Notes
No support No
Notes
Notes See bug 331608.
Firefox No support 1 — 62
Notes
No support 1 — 62
Notes
Notes Only returns a result if called on the result of getComputedStyle().
IE No support NoOpera No support 15 — 28
Notes
No support 15 — 28
Notes
Notes See bug 331608.
Safari Full support 6WebView Android No support ? — 41
Notes
No support ? — 41
Notes
Notes See bug 331608.
Chrome Android No support ? — 41
Notes
No support ? — 41
Notes
Notes See bug 331608.
Firefox Android No support 4 — 62Opera Android No support 14 — 28
Notes
No support 14 — 28
Notes
Notes See bug 331608.
Safari iOS Full support YesSamsung Internet Android No support ? — 4.0
Notes
No support ? — 4.0
Notes
Notes See bug 331608.
getPropertyPriorityChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
getPropertyValueChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
itemChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
lengthChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
parentRuleChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
removePropertyChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
setPropertyChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 6Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

See also