CSS 宣言ブロック
CSS 宣言ブロックは、 CSS のプロパティと値を順番に集めたものです。 DOM では CSSStyleDeclaration
として表現されます。
それぞれのプロパティと値の組は、CSS 宣言 として知られています。 CSS 宣言ブロックには、以下の関連するプロパティがあります。
- computed フラグ
-
CSSStyleDeclaration
オブジェクトが指定されたスタイルではなく、計算されたスタイルである場合に設定されます。既定では未設定です。 - 宣言
-
このオブジェクトに関連付けられた CSS 宣言です。
- 親 CSS ルール
-
CSS 宣言ブロックが関連付けられている
CSSRule
です。 - オーナーノード
-
この CSS 宣言ブロックが関連付けられている要素。それ以外は null。
- 更新フラグ
-
この CSS 宣言ブロックがオーナーノードの
style
属性を更新している場合に設定されます。
CSSStyleDeclaration
が CSS Object Model (CSSOM) インターフェイスによって返されると、これらのプロパティは、仕様によって定義された適切な値に設定されます。
基本的な例
以下の例は、 <h1> 要素に対する宣言ブロックを持つ CSS ルールを示しています。 CSS の宣言ブロックは、中括弧で囲まれた行です。
css
h1 {
margin: 0 auto;
font-family: "Helvetica Neue", "Arial", sans-serif;
font-style: italic;
color: rebeccapurple;
}
この CSS 宣言ブロックを表す CSSStyleDeclaration
を CSSStyleRule.style
で使用することで返すことができます。
js
let myRules = document.styleSheets[0].cssRules;
let rule = myRules[0]; // a CSSStyleRule
console.log(rule.style); // a CSSStyleDeclaration object
仕様書
Specification |
---|
CSS Object Model (CSSOM) # css-declaration-blocks |