此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

CSSStyleDeclaration

基线 广泛可用

自 2015年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

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

仅通过 Firefox 中的 getComputedStyle 得到支持。返回以 CSSPrimitiveValue 表示的属性值或 null(对于简写属性)。

示例

js
const styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (let i = styleObj.length; i--; ) {
  const nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}

console.log(styleObj.cssText);

规范

规范
CSS Object Model (CSSOM)
# the-cssstyledeclaration-interface

浏览器兼容性