CSS使用JS变量
站长
· 阅读数 12
一、前置知识点
JS设置CSS变量
- 通过
document.documentElement.style.setProperty()
方法将变量设置为CSS变量。 - 例如下面的用法:
document.documentElement.style.setProperty('--myColor', 'pink');
CSS变量
- CSS3中引入了CSS变量的概念,使用
var()函数
代表变量名,从而使得CSS样式可以重复使用。通过使用var()函数,我们可以方便地引用一些在CSS预处理器中定义的变量,这些变量可以控制各种不同样式的输出。 - 例如下面的用法:
.activeVersion{
color: var(--myColor);
}
二、可用场景
更换主题色
、切换局部样式
、不方便使用动态样式与动态类名时
、多页面同主题
等等
三、代码思路详解(主题切换示例)
- 通过JS逻辑设置CSS变量,可实现样式与逻辑的动态交互,可替代动态样式、动态类名等场景需求;
- 设置页面变量、全局变量或本地存储等控制当前JS逻辑;
注意:app.vue不要设置样式隔离scoped,.activeVersion类名就可以全局访问
。
app.vue
- 1、设置全局变量用于某个页面触发切换主题事件
- 2、在小程序创建时创建主题色的css变量
- 3、在css中设置一个类名,并使用css变量
<script>
export default {
// 定义全局变量
globalData: {
themeFlag: false,
colorCont:'yellow',
bgColorCont:'aqua'
},
onLaunch: function() {
//设置CSS变量
document.documentElement.style.setProperty('--myColorOne', 'yellow');
document.documentElement.style.setProperty('--myColorTwo', 'aqua');
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
}
</script>
<style lang="scss">
// 使用css变量
.activeVersion {
color: var(--myColorOne);
background-color: var(--myColorTwo);
}
</style>
index.vue
- 1、获取app实例
- 2、定义切换主题事件
- 3、不同主题状态不同逻辑
- 4、页面标签可直接使用app.vue的类名,注意当前页面不要再定义相同类名,会被覆盖
<template>
<view class="box">
<button @click="versionChange">切换主题</button>
<view class="activeVersion">变色龙一号</view>
<button class="activeVersion">变色龙二号</button>
<text class="activeVersion">变色龙三号</text>
</view>
</template>
<script>
// 获取app实例
const app = getApp();
export default {
name: "index",
data() {
return {};
},
onLoad() {},
methods: {
versionChange() {
// 获取全局变量
console.log('版本', app.globalData.themeFlag);
// 全局变量赋反
app.globalData.themeFlag = !app.globalData.themeFlag
//逻辑赋值
if (app.globalData.themeFlag) {
app.globalData.colorCont='#fff'
app.globalData.bgColorCont='yellow'
} else {
app.globalData.colorCont='pink'
app.globalData.bgColorCont='aqua'
}
//设置css变量
document.documentElement.style.setProperty('--myColorOne', app.globalData.colorCont);
document.documentElement.style.setProperty('--myColorTwo', app.globalData.bgColorCont);
},
},
components: {}
}
</script>
<style lang="scss" scoped></style>