CSSStyleDeclaration

CSSStyleDeclaration interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.

A CSSStyleDeclaration object can be exposed using three different APIs:

  • Via HTMLElement.style , which deals with the inline styles of a single element (e.g., <div style="..."> ).
  • Via the CSSStyleSheet API. For example, document.styleSheets[0].cssRules[0].style 返回 CSSStyleDeclaration object on the first CSS rule in the document's first stylesheet.
  • Via Window.getComputedStyle() , which exposes the CSSStyleDeclaration object as a 只读 接口。

属性

CSSStyleDeclaration.cssText
Textual representation of the declaration block. Setting this attribute changes the style.
CSSStyleDeclaration.length 只读
The number of properties. See the item() method below.
CSSStyleDeclaration.parentRule 只读
The containing CSSRule .

CSS 特性

CSSStyleDeclaration.cssFloat
Special alias for the float CSS property.
CSSStyleDeclaration named properties
Dashed and camel-cased attributes for all supported CSS properties.

方法

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

规范

规范 状态 Comment
CSS Object Model (CSSOM)
The definition of 'CSSStyleDeclaration' in that specification.
工作草案 Merged the DOM Level 2 Style CSS2Properties interface into CSSStyleDeclaration .
Document Object Model (DOM) Level 2 Style Specification
The definition of 'CSSStyleDeclaration' in that specification.
Obsolete 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
CSSStyleDeclaration Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari Yes WebView Android 4.4 Chrome Android 18 Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android 1.0
cssFloat Chrome 46 Edge 12 Firefox No IE ? Opera Yes Safari 11 WebView Android 46 Chrome Android 46 Firefox Android No Opera Android Yes Safari iOS Yes Samsung Internet Android 5.0
cssText Chrome 1 Edge 12 Firefox 1 IE ? Opera Yes Safari 6 WebView Android 4.4 Chrome Android 18 Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android 1.0
getPropertyCSSValue
弃用
Chrome ? — 41
不支持 ? — 41
bug 331608 .
Edge No
不支持 No
bug 331608 .
Firefox 1 — 62
不支持 1 — 62
Only returns a result if called on the result of getComputedStyle() .
IE No Opera 15 — 28
不支持 15 — 28
bug 331608 .
Safari 6 WebView Android ? — 41
不支持 ? — 41
bug 331608 .
Chrome Android ? — 41
不支持 ? — 41
bug 331608 .
Firefox Android 4 — 62 Opera Android 14 — 28
不支持 14 — 28
bug 331608 .
Safari iOS Yes Samsung Internet Android ? — 4.0
不支持 ? — 4.0
bug 331608 .
getPropertyPriority Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari 6 WebView Android 4.4 Chrome Android 18 Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android 1.0
getPropertyValue Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari 6 WebView Android 4.4 Chrome Android 18 Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android 1.0
item Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari 6 WebView Android 4.4 Chrome Android 18 Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android 1.0
length Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari 6 WebView Android 4.4 Chrome Android 18 Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android 1.0
parentRule Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari 6 WebView Android 4.4 Chrome Android 18 Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android 1.0
removeProperty Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari 6 WebView Android 4.4 Chrome Android 18 Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android 1.0
setProperty Chrome 1 Edge 12 Firefox 1 IE 9 Opera 9 Safari 6 WebView Android 4.4 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 6 Samsung Internet Android 1.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
弃用。不要用于新网站。
弃用。不要用于新网站。
见实现注意事项。

另请参阅