CSSStyleDeclaration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

TheCSSStyleDeclaration interface is the base class for objects that represent CSS declaration blocks with different supported sets of CSS style information:

CSSStyleProperties — CSS styles declared in stylesheet (CSSStyleRule.style), inline styles for an element such asHTMLElement,SVGElement, andMathMLElement, or the computed style for an element returned byWindow.getComputedStyle().
CSSPageDescriptors — Styles for CSSat-rules.

The interface exposes style information and various style-related methods and properties.For example, it providesgetPropertyValue() for getting the value of a dash-named CSS property, such asborder-top, which can't be directly accessed using dot notation because of the hyphens in its name.

Note:Earlier versions of the specification usedCSSStyleDeclaration to represent all CSS declaration blocks, and some browsers and browser versions may still do so (check the browser compatibility tables for the above APIs).Generally the same website code will be functional in both old and new versions, but some properties returned in aCSSStyleDeclaration may not be relevant in a particular context.

Attributes

CSSStyleDeclaration.cssText: Textual representation of the declaration block, if and only if it is exposed viaHTMLElement.style.Setting this attribute changes the inline style.If you want a text representation of a computed declaration block, you can get it withJSON.stringify().
CSSStyleDeclaration.lengthRead only: The number of properties.See theitem() method below.
CSSStyleDeclaration.parentRuleRead only: The containingCSSRule.

CSS Properties

CSSStyleDeclaration.cssFloatDeprecated: 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 ornull forshorthand 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);