Uniapp动态修改CSS（通过js修改CSS）

例如产品给了我们个需求需要点击一次按钮来使得view的高度增加10px

在html开发中很好实现，但是在uniapp开发app的时候发现并不能通过document.getElementById("")来指定。那么该怎么实现呢？往下看。

1.先搭建页面

嗯~我知道很丑，但就酱紫。Ծ‸Ծ

2.重点！！！改造代码，将vHeight放入的style标签中。

注意看改造后的style

嗯~改造完成，试一下效果。

确实生效了。

---

总结一下

js中动态修改css样式，需要先定义好要修改的变量，注意style的书写格式
1.style前面需要加 ： 号
2.style 引号中需要添加 {} 号
3.不同样式用 ， 号分割
4.不同属性用 ‘’ 单引号（取决于最外层符号）
5.变量是否需要单位，如果需要记得添加上单位。

动态style格式如下所示。

:style="{'height':vHeight + 'px', 'background':'#FF9900'}"

整体Demo代码：

没有base_body的属性的需要查看我上一篇文章，全局引入css

<template>
	<view class="base_body">
		<view :style="{'height':vHeight + 'px', 'background':'#FF9900'}"> 我是view1 </view>
		
		<!-- 按钮位于屏幕底部 -->
		<button type="warn" @click="addPX()" style="position: absolute; bottom: 0px; width: 100%;">view1高度增加10px</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vHeight:20, // view1的默认高度a
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 增加View1的高度
			 */
			addPX() {
				this.vHeight +=10; // 每次点击View1的高度增加10
				console.log("当前View的高度：",this.vHeight + "px");
			},
		}
	}
</script>

<style>
</style>

---

新加内容 ：style中也可使用三元表达式：

index 为int型整数。

:style="{'margin-top':index==0?'15rpx':''}"

完结撒花✿✿ヽ(°▽°)ノ✿~~