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

Question

我正在尝试通过 JavaScript 更新 CSS 自定义属性 ("CSS variables")。这有效：

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 对象是映射样式的便利对象，但它不是 "real CSS"。

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

Set CSS custom properties through Object.assign