CSSStyleDeclaration setProperty() 方法

CSSStyleDeclaration setProperty() 方法用于在CSS样式表中设置新的样式属性值。

语法

CSSStyleDeclaration.setProperty(propertyName, value, priority);

参数说明：

• propertyName: 必须。一个字符串，表示要设置的属性名。
• value: 必须。一个字符串，表示要设置的属性值。
• priority: 可选。一个字符串，可以设定为 "important"，表示该属性值为重要属性。

示例

<style>
  #demo {
    color: red;
  }
</style>
<div id="demo">Hello, world!</div>
<script>
  var element = document.getElementById("demo");
  var styles = window.getComputedStyle(element);

  // 修改 color 属性值，并改为重要属性
  styles.setProperty("color", "blue", "important");
</script>

上述示例代码用于修改 id 为 demo 的 div 元素的 color 样式属性值为 "blue"，并且将其设定为重要属性。修改后的样式规则将覆盖之前的规则，因为它被设定为重要属性。

返回值

该方法没有返回值。

备注

需要注意的是，该方法只能设置内联样式表（inline）和嵌入样式表（embedded）中的样式属性值。如果想要修改外部样式表（external）中的样式属性值，需要使用 document.styleSheets 对象也就是通过 JavaScript 动态创建 CSS 规则的方式实现。

参考链接

• MDN web docs