CSSStyleDeclaration - スタイルシートのまとまり
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()
プロパティの値を更新します。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
CSSStyleDeclaration | ● | ● | ● | ● | ● | ● | ● | ● |
cssFloat | ● 46+ | ● | × | ● | ● | ● 33+ | × | × |
cssText | ● | ● | ● | ● | ● | ● | ● | ● |
getPropertyPriority() | ● | ● | ● | ● | 確認中 | ● | ● | ● |
getPropertyValue() | ● | ● | ● | ● | 確認中 | ● | ● | ● |
item() | ● | ● | ● | ● | ● | ● | ● | ● |
length | ● | ● | ● | ● | ● | ● | ● | ● |
parentRule | ● | ● | ● | ● | 確認中 | ● | ● | ● |
removeProperty() | ● | ● | ● | ● | 確認中 | ● | ● | ● |
setProperty() | ● | ● | ● | ● | 確認中 | ● | ● | ● |
setPropertyPriority() | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 |
setPropertyValue() | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 | 確認中 |
関連記事
- CSSStyleDeclaration.removeProperty()
- removeProperty()は、CSSStyleDeclarationのメソッドです。プロパティの優先値(!important)を外します。
- CSSStyleDeclaration.setProperty()
- setProperty()は、CSSStyleDeclarationのメソッドです。プロパティの値と、優先値(!important)を更新します。
- StyleSheet
- StyleSheetは、スタイルシートを管理するための機能を備えたインターフェイスです。
- StyleSheetList
- StyleSheetListは、スタイルシートの集合を管理するための機能を備えたインターフェイスです。