CSSStyleDeclaration

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

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

  • HTMLElement.style
    DOM要素をインラインスタイルで扱う際。(例, <div style="...">).
  • CSSStyleSheet API。
    例えばdocument.styleSheets[0].cssRules[0].style は、CSSStyleDeclaration を返します。
  • Window.getComputedStyle()
    これは読み取り専用インターフェースとして、CSSStyleDeclaration オブジェクトを返します。

属性

CSSStyleDeclaration.cssText
Textual representation of the declaration block. Setting this attribute changes the style.
CSSブロック宣言をテキスト表示する。この属性を与えることでスタイルを変化させることが可能。
CSSStyleDeclaration.length読取専用
プロパティの数を表す。後述のitem()メソッドを参照のこと。
 
CSSStyleDeclaration.parentRule読取専用
CSSRuleを含むコンテナを表す。

CSS プロパティ

CSSStyleDeclaration.cssFloat
float CSSプロパティのエイリアス。
CSSStyleDeclaration named properties
全てのCSSプロパティに対して、その値を取得する。

メソッド

CSSStyleDeclaration.getPropertyPriority()
Returns the optional priority, "important".
CSSStyleDeclaration.getPropertyValue()
Returns the property value given a property name.
CSSStyleDeclaration.item()
Returns a CSS property name by its index, or the empty string if the index is out-of-bounds.
An alternative to accessing nodeList[i] (which instead returns undefined when i is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.
CSSStyleDeclaration.removeProperty()
Removes a property from the CSS declaration block.
CSSStyleDeclaration.setProperty()
Modifies an existing CSS property or creates a new CSS property in the declaration block.
CSSStyleDeclaration.getPropertyCSSValue()  これは廃止された API であり、動作は保証されていません。
Only supported via getComputedStyle in Firefox. Returns the property value as a CSSPrimitiveValue or null for shorthand properties.

var styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (var i = styleObj.length; i--;) {
  var nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}

console.log(styleObj.cssText);

仕様

仕様 ステータス コメント
CSS Object Model (CSSOM)
CSSStyleDeclaration の定義
草案 Merged the DOM Level 2 Style CSS2Properties interface into CSSStyleDeclaration.
Document Object Model (DOM) Level 2 Style Specification
CSSStyleDeclaration の定義
廃止 Initial definition

ブラウザー実装状況

BCD tables only load in the browser

関連情報