uniapp动态修改css样式(通过js来修改css样式)

  在uniapp开发app时，想通过js的document.getElementById("")来实现动态修改css的样式，结果却是不能实现的，uniapp不支持该用法。那如何在uniapp中实现通过js动态地修改css样式呢？
  假设点击一次按钮来使让某一个view的高度增加10px，该如何实现呢？

1. 搭建页面

<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

2. 修改代码，实现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':''}"