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

Question

我正在尝试通过 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);

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

Answer 1

请注意，element.style 对象是映射样式的便利对象，但它不是“真正的 CSS”。

根据 Amelia 的评论，所有规范定义的 css 属性都在 style 对象上预定义了 getter/setter，但自定义属性(必然)不是这种情况。因此，正确触发需要发生的事情的唯一方法是通过 getProperty/setProperty 机制。