{{ APIRef("CSSOM") }}
Summary
CSSStyleDeclaration
represents a collection of CSS property-value pairs. It is used in a few APIs:
- {{domxref("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 acssRule
in a stylesheet, when the rule is a CSSStyleRule. CSSStyleDeclaration
is also a read-only interface to the result of window.getComputedStyle().
Attributes
- {{domxref("CSSStyleDeclaration.cssText")}}
- Textual representation of the declaration block. Setting this attribute changes the style.
- {{domxref("CSSStyleDeclaration.length")}}
- The number of properties. See the item method below.
- {{domxref("CSSStyleDeclaration.parentRule")}}
- The containing {{domxref("CssRule")}}.
Methods
- {{domxref("CSSStyleDeclaration.getPropertyPriority()")}}
- Returns the optional priority, "important". Example: priString= styleObj.getPropertyPriority('color')
- {{domxref("CSSStyleDeclaration.getPropertyValue()")}}
- Returns the property value. Example: valString= styleObj.getPropertyValue('color')
- {{domxref("CSSStyleDeclaration.item()")}}
- Returns a property name. Example: nameString= styleObj.item(0) Alternative: nameString= styleObj[0]
- {{domxref("CSSStyleDeclaration.removeProperty()")}}
- Returns the value deleted. Example: valString= styleObj.removeProperty('color')
- {{domxref("CSSStyleDeclaration.setProperty()")}}
- No return. Example: styleObj.setProperty('color', 'red', 'important')
- {{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}}
- Only supported via getComputedStyle. Returns an {{ domxref("ROCSSPrimitiveValue") }} in Firefox ({{ domxref("CSSPrimitiveValue") }}, in others, which implements CSSValue), or
null
for Shorthand properties. Example: cssString= window.getComputedStyle(elem,null
).getPropertyCSSValue('color').cssText;
Note: Gecko 1.9 returns null unless using getComputedStyle().
Note: This method may be deprecated by the W3C , and it is not present in the latest CSSOM draft. It is not supported by IE and even though the function exists in Opera, calling it throws a {{ domxref("DOMException") }} NOT_SUPPORTED_ERR.
Example
var styleObj= document.styleSheets[0].cssRules[0].style; alert(styleObj.cssText); for (var i = styleObj.length-1; i >= 0; i--) { var nameString = styleObj[i]; styleObj.removeProperty(nameString); } alert(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).