Vue中设置CSS全局变量，通过JS改变CSS全局变量

原创于 2021-08-18 17:35:40 发布 · 2.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue #js

Vue 专栏收录该内容

13 篇文章

订阅专栏

这篇博客探讨了如何在网页中利用Less变量设置主题颜色，并通过JavaScript动态地修改这些变量的值，实现页面主题颜色的实时切换。示例中展示了如何定义全局变量`--themeColor`并在CSS中引用，以及如何使用`document.documentElement.style.setProperty`来更新变量的值，达到改变背景色的效果。

设置

<style lang="less" scope>
      :root{
            --themeColor:#00D98F;
      }
</style>

使用

<style lang="less" scope>
      .test{
            background-color: var(--themeColor);
      }
</style>

通过JS改变

document.documentElement.style.setProperty('--themeColor','值');