通过Javascript更新根css样式[重复]

Question

所以基本上我需要设置主题颜色，它作为模型属性从我的控制器传递到我的 css 文件使用 javascript。

这是当前css文件的根部分：

:root {
    --clr-primary: #ffca00;
    --clr-dark-blue: #1d1836;
    /* --clr-accent: #4917D6; */
    --clr-black-900: #1f1f1f;
    --clr-black-800: #303030;
    --clr-black-600: #3f3f3f;
    --clr-white-off: #f7f7f7;
}

我需要在页面加载时将“--clr-primanry”更新为任何主题颜色。

所以我所做的是使用 javascript：

    var jsonThemeColor = $('#menuThemeColor').val();
    var themeColor = JSON.parse(jsonThemeColor)
    console.log(themeColor)
    root.style.setProperty('--clr-primary',jsonThemeColor);

但这不起作用... 请注意，我有一个单独的 css 文件，我没有在标签中包含 css。 所以没有错误，只是颜色没有更新，而是显示为白色。

希望有人可以帮助我，代码解决方案会很有用。

Answer 1

你可以这样做，

document.documentElement.style.setProperty('--property', 'color');

您可以访问此link 以获取由 wesbos 创建的演示。