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 |
