前言
在 UniApp 中，我们经常需要动态修改样式，比如切换日夜间模式、调整字体大小等。这时候我们就需要掌握一些动态修改样式的技巧。本文将介绍几种常用的方法，帮助大家更好地掌控样式变化。
一、使用 Vue 的计算属性
Vue 中的计算属性可以根据依赖变量动态计算出新的属性值，所以我们可以利用它来动态修改样式。
比如，我们可以在 data 中定义一个用于控制日夜间模式的变量 isNight，然后在 computed 中计算出对应的样式：
<template>
<div :style="themeStyle">
<!-- 内容 -->
</div>
</template>
<script>
export default {
data () {
return {
isNight: false // 默认为白天模式
}
},
computed: {
themeStyle () {
return {
// 日间模式样式
backgroundColor: this.isNight ? '#37474f' : '#fafafa',
color: this.isNight ? '#fff' : '#000',
// 其他属性
}
}
}
}
</script>这样，只要 isNight 变量发生变化，样式就可以自动更新。
二、使用 ref 获取元素
有时候，我们需要直接操作 DOM 元素的样式，这时候可以使用 ref 来获取元素。
<template>
<div ref="myDiv">
<!-- 内容 -->
</div>
</template>
<script>
export default {
methods: {
changeStyle () {
const myDiv = this.$refs.myDiv
myDiv.style.color = 'red'
myDiv.style.fontSize = '20px'
// 其他样式
}
}
}
</script>这样，我们就可以在 changeStyle 方法中动态修改样式了。
三、利用 JavaScript 设置样式
最直接的方法是利用 JavaScript 设置样式。通过获取元素的样式对象，然后修改对应属性的值即可。
<template>
<div id="myDiv">
<!-- 内容 -->
</div>
</template>
<script>
export default {
methods: {
changeStyle () {
const myDiv = document.getElementById('myDiv')
myDiv.style.color = 'red'
myDiv.style.fontSize = '20px'
// 其他样式
}
}
}
</script>这种方法不需要写额外的样式规则，但需要注意的是，我们要确保修改样式的时机，以免覆盖掉原本的样式规则。
四、全局样式与局部样式
相信你在使用 UniApp 开发项目时，遇到过这样的疑惑：为什么一些样式在 App.vue 中定义后，在其他页面也能生效？
这是因为 App.vue 中的样式是全局样式，会被所有页面共享。如果我们需要定义局部样式，可以在对应页面的样式文件中定义。
比如，我们在 App.vue 中定义一个全局样式：
<style>
/* 全局样式 */
body {
background-color: #fafafa;
}
</style>这个样式会被所有页面共享，如果需要在某个页面中修改样式，可以在该页面的样式文件中定义。
<style>
/* 局部样式 */
body {
background-color: #37474f;
}
</style>这样，该页面的 body 样式会覆盖全局的 body 样式。
结语
本文介绍了一些常用的动态修改样式的方法，包括使用 Vue 的计算属性、使用 ref 获取元素、利用 JavaScript 设置样式、全局样式与局部样式等。希望对大家在 UniApp 开发中遇到动态修改样式的情况有所帮助。
