CSSStyleDeclaration：setProperty() 方法

CSSStyleDeclaration.setProperty() 方法接口设置 CSS 样式声明对象上属性的新值。

语法

js
setProperty(propertyName, value)
setProperty(propertyName, value, priority)

参数

propertyName

表示要修改的 CSS 属性名称（连字符大小写）的字符串。

value 可选

包含新属性值的字符串。如果未指定，则视为空字符串。一个 null 值的处理方式与空字符串 ("") 相同。

注意：value 必须不包含 "!important"，这应该使用 priority 参数设置。

priority 可选

允许设置“important”CSS 优先级的字符串。如果未指定，则视为空字符串。接受以下值

  • 字符串值 "important"
  • 关键字 undefined
  • 字符串空值 ""

返回值

无 (undefined)。

异常

NoModificationAllowedError DOMException

如果属性或声明块为只读，则抛出此异常。

替代用法

如果 priority 可以省略，JavaScript 有一种特殊的更简单的语法来在样式声明对象上设置 CSS 属性

js
style.cssPropertyName = "value";

示例

在这个例子中，我们有三个按钮，可以按下它们来动态地改变我们的 box 段落的边框、背景颜色和文本颜色为随机值（参见本节末尾的实时示例）。

我们知道我们想要改变的规则包含在应用于页面的第二个样式表中，所以我们使用 document.styleSheets[1] 获取对它的引用。然后，我们循环遍历样式表中包含的不同规则，这些规则包含在 stylesheet.cssRules 中找到的数组中；对于每个规则，我们检查其 CSSStyleRule.selectorText 属性是否等于选择器 .box p，这表示它是我们想要的那个。

如果是，我们将对该 CSSStyleRule 对象的引用存储在一个变量中。然后，我们使用三个函数为相关属性生成随机值，并使用这些值更新规则。在每种情况下，这都是使用 setProperty() 方法完成的，例如 boxParaRule.style.setProperty('border', newBorder);。

HTML

html
<div class="controls">
  <button class="border">Border</button>
  <button class="bgcolor">Background</button>
  <button class="color">Text</button>
</div>
<div class="box">
  <p>Box</p>
</div>

CSS

css
html {
  background: orange;
  font-family: sans-serif;
  height: 100%;
}

body {
  height: inherit;
  width: 80%;
  min-width: 500px;
  max-width: 1000px;
  margin: 0 auto;
}

.controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

div button {
  flex: 1;
  margin: 20px;
  height: 30px;
  line-height: 30px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 70px);
}

.box p {
  width: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  height: 150px;
  line-height: 150px;
  background: red;
  border: 5px solid purple;
  color: white;
  transition: all 1s;
}

JavaScript

js
const borderBtn = document.querySelector(".border");
const bgColorBtn = document.querySelector(".bgcolor");
const colorBtn = document.querySelector(".color");
const box = document.querySelector(".box");

function random(min, max) {
  const num = Math.floor(Math.random() * (max - min)) + min;
  return num;
}

function randomColor() {
  return `rgb(${random(0, 255)} ${random(0, 255)} ${random(0, 255)})`;
}

const stylesheet = document.styleSheets[1];
const boxParaRule = [...stylesheet.cssRules].find(
  (r) => r.selectorText === ".box p",
);

function setRandomBorder() {
  const newBorder = `${random(1, 50)}px solid ${randomColor()}`;
  boxParaRule.style.setProperty("border", newBorder);
}

function setRandomBgColor() {
  const newBgColor = randomColor();
  boxParaRule.style.setProperty("background-color", newBgColor);
}

function setRandomColor() {
  const newColor = randomColor();
  boxParaRule.style.setProperty("color", newColor);
}

borderBtn.addEventListener("click", setRandomBorder);
bgColorBtn.addEventListener("click", setRandomBgColor);
colorBtn.addEventListener("click", setRandomColor);

结果

规范

规范
CSS 对象模型 (CSSOM)
# dom-cssstyledeclaration-setproperty

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。