CSSStyleDeclaration
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
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 aCSSStyleDeclaration
object on the first CSS rule in the document's first stylesheet. - Via
Window.getComputedStyle()
, which exposes theCSSStyleDeclaration
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 withJSON.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
ornull
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