CSSStyleDeclaration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

CSSStyleDeclaration インターフェイスは CSS 宣言ブロックのオブジェクトを表し、スタイル情報や様々なスタイルに関するメソッドやプロパティを提供します。

CSSStyleDeclaration オブジェクトは、下記の 3 つの API によって使用されます。

単一の要素のインラインスタイルを扱うHTMLElement.style から（例:<div>）。
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);