CSSStyleDeclaration
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
CSSStyleDeclaration インターフェイスは CSS 宣言ブロックのオブジェクトを表し、スタイル情報や様々なスタイルに関するメソッドやプロパティを提供します。
CSSStyleDeclaration オブジェクトは、下記の 3 つの API によって使用されます。
- 単一の要素のインラインスタイルを扱う
HTMLElement.styleから（例:<div style="…">）。 CSSStyleSheetAPI から。例えば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プロパティの特殊な別名です。 - <code>CSSStyleDeclaration</code> の名前付きプロパティ
-
対応するすべての 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 |