CSSStyleDeclaration

CSSStyleDeclaration 接口表示一个对象,它是一个 CSS 声明块,CSS 属性键值对的集合。它暴露了样式信息和各种与样式相关的方法和属性。

CSSStyleDeclaration 对象可被暴露于三种不同的 API 下:

  • HTMLElement.style,用于操作单个元素的样式(<elem style="...">)。
  • CSSStyleSheet API,举个例子,document.styleSheets[0].cssRules[0].style 会返回文档中第一个样式表中的第一条 CSS 规则。
  • Window.getComputedStyle(),将 CSSStyleDeclaration 对象作为一个只读的接口。

属性

CSSStyleDeclaration.cssText
当前声明块的文本内容。设置此属性会改变样式。
CSSStyleDeclaration.length
属性的数量。参照下面的 item() 方法。
CSSStyleDeclaration.parentRule
包含当前声明块的 CssRule

方法

CSSStyleDeclaration.getPropertyPriority()
返回可选的优先级,"important"。
CSSStyleDeclaration.getPropertyValue()
返回属性值。
CSSStyleDeclaration.item()
返回属性名。
CSSStyleDeclaration.removeProperty()
从 CSS 声明块中删除属性。
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
Working Draft
Document Object Model (DOM) Level 2 Style Specification
CSSStyleDeclaration
Obsolete Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
CSSStyleDeclarationChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
cssFloatChrome Full support 46Edge Full support 12Firefox No support NoIE ? Opera Full support YesSafari Full support 11WebView Android Full support 46Chrome Android Full support 46Firefox Android No support NoOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
cssTextChrome Full support 1Edge Full support 12Firefox Full support 1IE ? Opera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
getPropertyCSSValue
Deprecated
Chrome No support ? — 41
Notes
No support ? — 41
Notes
Notes See bug 331608.
Edge No support No
Notes
No support No
Notes
Notes See bug 331608.
Firefox No support 1 — 62
Notes
No support 1 — 62
Notes
Notes Only returns a result if called on the result of getComputedStyle().
IE No support NoOpera No support 15 — 28
Notes
No support 15 — 28
Notes
Notes See bug 331608.
Safari Full support 6WebView Android No support ? — 41
Notes
No support ? — 41
Notes
Notes See bug 331608.
Chrome Android No support ? — 41
Notes
No support ? — 41
Notes
Notes See bug 331608.
Firefox Android No support 4 — 62Opera Android No support 14 — 28
Notes
No support 14 — 28
Notes
Notes See bug 331608.
Safari iOS Full support YesSamsung Internet Android No support ? — 4.0
Notes
No support ? — 4.0
Notes
Notes See bug 331608.
getPropertyPriorityChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
getPropertyValueChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
itemChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
lengthChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
parentRuleChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
removePropertyChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0
setPropertyChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 6Samsung Internet Android Full support 1.0

Legend

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

参见