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 returnsundefined
wheni
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
ornull
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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.