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() 
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

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
CSSStyleDeclarationChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
cssFloatChrome 完全対応 46Edge 完全対応 12Firefox 未対応 なしIE ? Opera 完全対応 ありSafari 完全対応 11WebView Android 完全対応 46Chrome Android 完全対応 46Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
cssTextChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
getPropertyCSSValue
非推奨
Chrome 未対応 ? — 41
補足
未対応 ? — 41
補足
補足 See bug 331608.
Edge 未対応 なし
補足
未対応 なし
補足
補足 See bug 331608.
Firefox 未対応 1 — 62
補足
未対応 1 — 62
補足
補足 Only returns a result if called on the result of getComputedStyle().
IE 未対応 なしOpera 未対応 15 — 28
補足
未対応 15 — 28
補足
補足 See bug 331608.
Safari 完全対応 6WebView Android 未対応 ? — 41
補足
未対応 ? — 41
補足
補足 See bug 331608.
Chrome Android 未対応 ? — 41
補足
未対応 ? — 41
補足
補足 See bug 331608.
Firefox Android 未対応 4 — 62Opera Android 未対応 14 — 28
補足
未対応 14 — 28
補足
補足 See bug 331608.
Safari iOS 完全対応 ありSamsung Internet Android 未対応 ? — 4.0
補足
未対応 ? — 4.0
補足
補足 See bug 331608.
getPropertyPriorityChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
getPropertyValueChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
itemChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
lengthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
parentRuleChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
removePropertyChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
setPropertyChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9Safari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 6Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報