在uniapp开发app时，想通过js的document.getElementById("")来实现动态修改css的样式，结果却是不能实现的，uniapp不支持该用法。那如何在uniapp中实现通过js动态地修改css样式呢？
假设点击一次按钮来使让某一个view的高度增加10px，该如何实现呢？
- 搭建页面
<template>
<view class="page-content">
<view style="background-color: red">我是view</view>
<button type="default" @click="addHeight()">点击</button>
</view>
</template>
<script>
export default {
data() {
return {
needHeight: 20,
}
},
methods: {
addHeight() {
this.needHeight+= 10;
}
}
}
</script>
<style>
</style>
原图.png
- 修改代码，实现js动态修改css样式的效果
<template>
<view class="page-content">
<view :style="{'height':needHeight + 'px', 'background':'red'}">我是view</view>
<button type="default" @click="addHeight()">点击</button>
</view>
</template>
<script>
export default {
data() {
return {
needHeight: 20,
}
},
methods: {
addHeight() {
this.needHeight += 10;
}
}
}
</script>
<style>
</style>
效果图.png
注意：js中动态修改css样式，需要先定义好要修改的变量，注意style的书写格式
1. style前面需要加 : 号
2. style 引号中需要添加 {} 号
3. 不同样式用 , 号分割
4. 不同属性用 ' ' 单引号（取决于最外层符号）
5. 变量是否需要单位，如果需要记得添加上单位。
动态style格式:
:style="{'height':needHeight + 'px', 'background':'red'}"
style中也可使用三元表达式：
:style="{'height':needHeight == 20?'100px':''}"
