js修改scss样式中定义的属性值

最新推荐文章于 2024-05-28 16:26:24 发布

noeal

最新推荐文章于 2024-05-28 16:26:24 发布

阅读量1.2k

点赞数

分类专栏： Vue3.0 文章标签： javascript scss css

本文链接：https://blog.csdn.net/noeal/article/details/121742508

版权

CSS变量 JavaScript 主题色 SCSS Vuex

关键词由CSDN通过智能技术生成

Vue3.0 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1、设置并应用主题色

// --primaryColor：为js操作此变量需要用到的KEY
// '#6081c5': 默认的css属性值
<style lang="scss" scoped>
$primaryColor: var(--primaryColor, '#6081c5');
.ss{
	background: $primaryColor;
}
</style>

2、js中修改 --primaryColor 属性值

document.getElementsByTagName('body')[0].style.setProperty('--primaryColor', '#F00')
// 可将颜色值 '#F00' 换成 this.$store.state.theme.primaryColor，可使用store中的属性值。