CSS Declaration Block
A CSS declaration block is an ordered collection of CSS properties and values. It is represented in the DOM as a CSSStyleDeclaration
.
Each property and value pairing is known as a CSS declaration. The CSS declaration block has the following associated properties:
- computed flag
-
Set if the
CSSStyleDeclaration
object is a computed rather than specified style. Unset by default. - declarations
-
The CSS declarations associated with this object.
- parent CSS rule
-
The
CSSRule
that the CSS declaration block is associated with, otherwise null. - owner node
-
The
element
that the CSS declaration block is associated with, otherwise null. - updating flag
-
Set when the CSS declaration block is updating the owner node's
style
attribute.
When a CSSStyleDeclaration
is returned by a CSS Object Model (CSSOM) interface these properties are set to appropriate values as defined by the specification.
Basic example
The following example shows a CSS rule with a declaration block for the h1 element. The CSS declaration block is the lines between the curly braces.
h1 {
margin: 0 auto;
font-family: "Helvetica Neue", "Arial", sans-serif;
font-style: italic;
color: rebeccapurple;
}
We can return a CSSStyleDeclaration
representing this CSS declaration block using CSSStyleRule.style
.
let myRules = document.styleSheets[0].cssRules;
let rule = myRules[0]; // a CSSStyleRule
console.log(rule.style); // a CSSStyleDeclaration object
Specifications
Specification |
---|
CSS Object Model (CSSOM) # css-declaration-blocks |