通过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对象上都有预定义的getters / setters，但是自定义属性不是（必需）这种情况。因此，正确触发需要发生的事情的唯一方法是通过getProperty / setProperty机制。