CSSStyleDeclaration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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(): 返回用 index 标记的属性名，当 index 越界时返回空字符串。另一个可选方案：使用 nodeList[i]（在 i 越界时返回 undefined）获取。通常在非 JavaScript Dom 实现方案是很有用。
CSSStyleDeclaration.removeProperty(): 从 CSS 声明块中删除属性。
CSSStyleDeclaration.setProperty(): 在 CSS 声明块中修改现有属性或设置新属性。
CSSStyleDeclaration.getPropertyCSSValue() 已弃用: 仅在火狐浏览器中支持 getComputedStyle. 返回 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);

规范

Specification
CSS Object Model (CSSOM) # the-cssstyledeclaration-interface

浏览器兼容性

BCD tables only load in the browser

参见

DOM CSS Properties