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.

* Some parts of this feature may have varying levels of support.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSStyleDeclaration
[Symbol.iterator]
cssFloat
cssText
getPropertyCSSValue
Deprecated
getPropertyPriority
getPropertyValue
item
length
parentRule
removeProperty
setProperty

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
See implementation notes.