CSSStyleDeclaration
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
CSSStyleDeclaration
インターフェイスは CSS 宣言ブロックのオブジェクトを表し、スタイル情報や様々なスタイルに関するメソッドやプロパティを提供します。
CSSStyleDeclaration
オブジェクトは、下記の 3 つの API によって使用されます。
- 単一の要素のインラインスタイルを扱う
HTMLElement.style
から(例:<div style="…">
)。 CSSStyleSheet
API から。例えばdocument.styleSheets[0].cssRules[0].style
は、その文書の最初のスタイルシートの最初の CSS ルールをCSSStyleDeclaration
を返します。Window.getComputedStyle()
で、CSSStyleDeclaration
オブジェクトを読み取り専用インターフェイスとして返します。
属性
CSSStyleDeclaration.cssText
-
宣言ブロックのテキスト表現です。
HTMLElement.style
で公開されている場合のみ。この属性を設定すると、インラインスタイルが変更されます。計算された宣言ブロックのテキスト表現が必要な場合は、JSON.stringify()
で取得することができます。 CSSStyleDeclaration.length
読取専用-
プロパティの数を表します。後述の
item()
メソッドを参照のこと。 CSSStyleDeclaration.parentRule
読取専用-
所属する
CSSRule
を表します。
CSS プロパティ
CSSStyleDeclaration.cssFloat
-
CSS の
float
プロパティの特殊な別名です。 CSSStyleDeclaration
の名前付きプロパティ-
対応するすべての CSS プロパティを、ダッシュおよびキャメルケースにした属性です。
メソッド
CSSStyleDeclaration.getPropertyPriority()
-
オプションの優先度、 "important" を返します。
CSSStyleDeclaration.getPropertyValue()
-
指定されたプロパティ名のプロパティ値を返します。
CSSStyleDeclaration.item()
-
位置から CSS プロパティ名を返します。位置が範囲を超えていた場合は空文字列を返します。 代替方法は
nodeList[i]
にアクセスすることです (これはi
が範囲外であった場合はundefined
を返します)。これは JavaScript 以外の DOM 実装の多くで最も有用です。 CSSStyleDeclaration.removeProperty()
-
CSS 宣言ブロックからプロパティを削除します。
CSSStyleDeclaration.setProperty()
-
宣言ブロック内の既存の CSS プロパティを変更するか、新しい CSS プロパティを生成するかします。
CSSStyleDeclaration.getPropertyCSSValue()
非推奨-
Firefox の getComputedStyle のみ対応 プロパティの値を
CSSPrimitiveValue
として、または一括指定プロパティではnull
を返します。
例
const styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);
for (let i = styleObj.length; i--; ) {
const nameString = styleObj[i];
styleObj.removeProperty(nameString);
}
console.log(styleObj.cssText);
仕様書
Specification |
---|
CSS Object Model (CSSOM) # the-cssstyledeclaration-interface |
ブラウザーの互換性
BCD tables only load in the browser