CSSStyleDeclaration

Summary

CSSStyleDeclaration represents a collection of CSS property-value pairs. It is used in a few APIs:

• HTMLElement.style - to manipulate the style of a single element (<elem style="...">);
• (TODO: reword) is an interface to the declaration block returned by the style property of a cssRule in a stylesheet, when the rule is a CSSStyleRule.
• CSSStyleDeclaration is also a read-only interface to the result of window.getComputedStyle().

Attributes

CSSStyleDeclaration.cssText

Textual representation of the declaration block. Setting this attribute changes the style.

CSSStyleDeclaration.length Read only

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

CSSStyleDeclaration.parentRule Read only

The containing CSSRule.

Methods

CSSStyleDeclaration.getPropertyPriority()

Returns the optional priority, "important".

CSSStyleDeclaration.getPropertyValue()

Returns the property value given a property name.

CSSStyleDeclaration.item()

Returns a property name.

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

Notes

The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).

See also

• DOM CSS Properties

Specifications