时间戳

首页 > 解决方案 > 通过 Object.assign 设置 CSS 自定义属性

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);

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

标签： javascriptcsscss-variables

解决方案

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

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

推荐阅读