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. 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
.
CSS Properties
CSSStyleDeclaration.cssFloat
- Special alias for the
float
CSS property. CSSStyleDeclaration
named properties- Dashed and camel-cased attributes for all supported CSS properties.
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.
- An alternative to accessing
nodeList[i]
(which instead returnsundefined
wheni
is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations. 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
ornull
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);
Specifications
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) The definition of 'CSSStyleDeclaration' in that specification. |
Working Draft | Merged the DOM Level 2 Style CSS2Properties interface into CSSStyleDeclaration . |
Document Object Model (DOM) Level 2 Style Specification The definition of 'CSSStyleDeclaration' in that specification. |
Obsolete | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSStyleDeclaration | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
cssFloat | Chrome Full support 46 | Edge Full support 12 | Firefox No support No | IE ? | Opera Full support Yes | Safari Full support 11 | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android No support No | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 5.0 |
cssText | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
getPropertyCSSValue | Chrome
No support
? — 41
| Edge
No support
No
| Firefox
No support
1 — 62
| IE No support No | Opera
No support
15 — 28
| Safari Full support 6 | WebView Android
No support
? — 41
| Chrome Android
No support
? — 41
| Firefox Android No support 4 — 62 | Opera Android
No support
14 — 28
| Safari iOS Full support Yes | Samsung Internet Android
No support
? — 4.0
|
getPropertyPriority | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
getPropertyValue | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
item | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
length | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
parentRule | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
removeProperty | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
setProperty | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 9 | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 6 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.