CSS 宣言ブロック

CSS 宣言ブロックは、 CSS のプロパティと値を順番に集めたものです。 DOM では CSSStyleDeclaration として表現されます。

それぞれのプロパティと値の組は、CSS 宣言 として知られています。 CSS 宣言ブロックには、以下の関連するプロパティがあります。

computed フラグ

CSSStyleDeclaration オブジェクトが指定されたスタイルではなく、計算されたスタイルである場合に設定されます。既定では未設定です。

宣言

このオブジェクトに関連付けられた CSS 宣言です。

親 CSS ルール

CSS 宣言ブロックが関連付けられている CSSRule です。

オーナーノード

この CSS 宣言ブロックが関連付けられている要素。それ以外は null。

更新フラグ

この CSS 宣言ブロックがオーナーノードの style 属性を更新している場合に設定されます。

CSSStyleDeclarationCSS Object Model (CSSOM) インターフェイスによって返されると、これらのプロパティは、仕様によって定義された適切な値に設定されます。

基本的な例

以下の例は、 <h1> 要素に対する宣言ブロックを持つ CSS ルールを示しています。 CSS の宣言ブロックは、中括弧で囲まれた行です。

css
h1 {
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  color: rebeccapurple;
}

この CSS 宣言ブロックを表す CSSStyleDeclarationCSSStyleRule.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