为什么我的 JavaScript 更改不影响我的 CSS :root 变量？

使用 JavaScript 更改 CSS :root 颜色变量

用户旨在实现一个通过调整颜色变量来改变网页主题的系统定义在 CSS 的 :root 部分。尽管实现了 JavaScript 代码来设置主题，但没有观察到任何变化。

提供的代码尝试更改 --main-color 变量，但它没有使用正确的语法。在 JavaScript 中修改 :root 变量的正确方法是使用 document.documentElement.style.setProperty() 方法。应将以下行添加到 JavaScript 代码中：

document.documentElement.style.setProperty('--main-color', '#YOURCOLOR');

其中 #YOURCOLOR 表示所需的颜色值。例如，要将主颜色设置为蓝色，应使用以下行：

document.documentElement.style.setProperty('--main-color', '#0000FF');

通过将此行合并到 JavaScript 代码中，用户将能够动态更改 :root 颜色变量，允许他们自定义网页的主题。

以上是为什么我的 JavaScript 更改不影响我的 CSS :root 变量？的详细内容。更多信息请关注PHP中文网其他相关文章！