Javascript 通过Object.assign设置CSS自定义属性

我正试图通过JavaScript更新CSS自定义属性（“CSS变量”）。这项工作：

element.style.setProperty("--foo", "bar");
element.style.setProperty("--bar", "foo");
element.style.setProperty("border", "10px solid hotpink");

但是使用

Object.assign

不起作用。应用边框，但不应用CSS变量

--foo

和

--bar

const styles = {}

styles["--foo"] = "bar";
styles["--bar"] = "foo";
styles["border"] = "10px solid hotpink";

Object.assign(element.style, styles);

---

有人知道这里出了什么问题吗？

请注意，

元素.style

对象是映射样式的方便对象，但它不是“真正的CSS”

---

根据Amelia的评论，所有规范定义的css属性在

style

对象上都有预定义的getter/setter，但这（必然）不是自定义属性的情况。因此，正确触发需要发生的事情的唯一方法是通过getProperty/setProperty机制。

为了减少问题，即使是

元素.style[“--foo”]=“bar”

也不会工作。假设原因是

style

对象本身包含类似

边框的内容。当您试图分配无效的CSS属性（例如CSS自定义属性）时，它将不会被设置。您需要改为使用
.setProperty（）
进行设置。这里有一种方法可以做到这一点：（关键是迭代
styles
对象，并使用
.setProperty
应用每个属性使用
setProperty（）的需要）
对于任何CSSStyleDeclaration对象，无论它是来自
element.style
还是CSSOM的任何其他部分，自定义属性都是相同的。问题是，正如您前面所说，CSS属性声明不是简单的JS对象属性，它们需要getter/setter才能发挥作用&只需要识别CSS属性将其定义为。
样式[“背景图像”]=…
，并在CSSOM中指定为。