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 プロパティの特殊な別名です。

<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 を返します。

例

js
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