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

Specification
CSS Object Model (CSSOM) # the-cssstyledeclaration-interface

Browser compatibility

BCD tables only load in the browser