CSSStyleDeclaration - スタイルシートのまとまり

概要

名前

CSSStyleDeclaration

IDL

[Exposed=Window]
interface CSSStyleDeclaration {
  [CEReactions] attribute CSSOMString cssText;
  readonly attribute unsigned long length;
  getter CSSOMString item(unsigned long index);
  CSSOMString getPropertyValue(CSSOMString property);
  CSSOMString getPropertyPriority(CSSOMString property);
  [CEReactions] void setProperty(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString value, [TreatNullAs=EmptyString] optional CSSOMString priority = "");
  [CEReactions] void setPropertyValue(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString value);
  [CEReactions] void setPropertyPriority(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString priority);
  [CEReactions] CSSOMString removeProperty(CSSOMString property);
  readonly attribute CSSRule? parentRule;
  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString cssFloat;
};

typedef USVString CSSOMString;

// CSS Object Model
partial interface CSSStyleDeclaration {
  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString _camel_cased_attribute;
};

typedef USVString CSSOMString;

// CSS Object Model
partial interface CSSStyleDeclaration {
  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString _webkit_cased_attribute;
};

typedef USVString CSSOMString;

// CSS Object Model
partial interface CSSStyleDeclaration {
  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString _dashed_attribute;
};

typedef USVString CSSOMString;

仕様書

https://drafts.csswg.org/cssom/#cssstyledeclaration

https://drafts.csswg.org/cssom/#extensions-to-the-window-interface (CSS Object Model)

チュートリアル

style属性

CSSStyleDeclarationは、主に3種類あります。1つ目は、style属性で指定されたスタイルシートのまとまりです。この場合、CSSStyleDeclarationには"color:red;"の情報しか含まれていません。これは、HTML要素のstyleが返します。

<p style="color:red;" id="hoge">SYNCER</p>

var element = document.getElementById( "hoge" ) ;
element.style ;	// CSSStyleDeclaration

計算値

2つ目は要素の計算値を表すスタイルシートのまとまりです。計算値とはドキュメントをレンダリング後の、初期値や継承値を考慮した値です。例えば、ある要素にfont-familyが指定されていなくても、祖先要素の値を受け継ぐか、またはユーザーエージェントが定める初期値が適用されますよね。この最終的に適用される値のことを計算値といいます。

計算値のCSSStyleDeclarationは、Window.getComputedStyle()で取得できます。計算値なので、当然、全種類のスタイルシートの情報を含んでいます。計算値の場合、値を代入するなどして内容を変更することはできません。

getComputedStyle( element ) ;	// CSSStyleDeclaration

擬似要素の計算値を取得するには、第2引数を利用します。例えば下記は、::beforeに適用されているスタイルシートを取得する例です。

getComputedStyle( element, "::before" ) ;	// CSSStyleDeclaration

宣言ブロック

3つ目は、1つの宣言ブロック内のスタイルシートのまとまりです。宣言ブロックとは、{から}までを指します。例えば、下記が1つの宣言ブロックです。

<style id="hoge">
a {
	color: red ;
	background-color: blue ;
}
</style>

宣言ブロックのCSSStyleDeclarationを取得するには、次の手順を取ります。CSSStyleSheetやCSSRuleの説明をご参考下さい。

var element = document.getElementById( "hoge" ) ;	// <style>...</style>
var cssStyleSheet = element.sheet ;	// CSSStyleSheet
var cssRule = cssStyleSheet.cssRules[0] ;	// CSSRule
cssRule.style ;	// CSSStyleDeclaration

コンストラクタ

コンストラクタはありません。

プロパティ

cssFloat

適用されているfloat値を返します。

cssText

全種類のスタイルシートをテキストで返します。

length

オブジェクトが含んでいるスタイルシートの種類の数を返します。

parentRule

親の宣言ブロックをCSSRuleで返します。

メソッド

getPropertyPriority()

対象のスタイルシートに!importantのキーワードがある場合、"important"を返します。

getPropertyValue()

プロパティの値を返します。

item()

インデックス番号を指定してプロパティ名を取得します。

removeProperty()

プロパティの優先値を外します。

setProperty()

プロパティの値と、優先値を更新します。

setPropertyPriority()

プロパティの優先値を更新します。

setPropertyValue()

プロパティの値を更新します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

関連記事

CSSStyleDeclaration.removeProperty()

removeProperty()は、CSSStyleDeclarationのメソッドです。プロパティの優先値(!important)を外します。

CSSStyleDeclaration.setProperty()

setProperty()は、CSSStyleDeclarationのメソッドです。プロパティの値と、優先値(!important)を更新します。

StyleSheet

StyleSheetは、スタイルシートを管理するための機能を備えたインターフェイスです。

StyleSheetList

StyleSheetListは、スタイルシートの集合を管理するための機能を備えたインターフェイスです。