W3cubDocs

/Web APIs

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

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

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