CSSStyleDeclaration

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

CSSStyleDeclaration オブジェクトは下記の３つの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() 

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 Properties Reference