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