uniapp 如何使用style.setProperty

在uniapp中，可以使用以下方式设置元素的style属性：

1. 使用内联样式：可以在模板中直接使用style属性设置元素的样式，如：

<view style="color: red; font-size: 16px;">Hello World</view>

2. 使用class样式：可以在样式文件中定义class样式，然后在模板中使用class属性设置元素的样式，如：

在样式文件中定义：

.my-class {
  color: red;
  font-size: 16px;
}

在模板中使用：

<view class="my-class">Hello World</view>

如果需要在运行时动态地修改元素的样式，可以使用JavaScript代码来修改元素的style属性。在uniapp中，可以使用以下方式设置元素的style属性：

1. 使用dom操作：可以使用uni.createSelectorQuery()方法获取元素的节点对象，然后使用节点对象的style属性来设置元素的样式，如：

<template>
  <view class="my-view" ref="myView">Hello World</view>
</template>

<script>
export default {
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('.my-view').fields({computedStyle: ['width', 'height']}, (res) => {
      this.$refs.myView.$el.style.setProperty('color', 'red');
      this.$refs.myView.$el.style.setProperty('font-size', res.height / 2 + 'px');
    }).exec();
  }
}
</script>

在上面的例子中，首先使用uni.createSelectorQuery()方法获取元素的节点对象，然后使用节点对象的style属性来设置元素的样式。在设置样式时，可以使用style.setProperty()方法来设置元素的样式。需要注意的是，使用style.setProperty()方法设置样式时，需要通过元素的$el属性来访问元素的DOM节点。

2. 使用样式对象：可以使用uni.$setStyle()方法来设置元素的样式，如：

<template>
  <view class="my-view" :style="myStyle">Hello World</view>
</template>

<script>
export default {
  data() {
    return {
      myStyle: {
        color: 'red',
        fontSize: '16px'
      }
    }
  },
  mounted() {
    uni.$setStyle(this.$refs.myView, 'font-size', '20px');
  }
}
</script>

在上面的例子中，首先在data属性中定义了myStyle对象来保存元素的样式，然后在模板中使用:style属性将myStyle对象绑定到元素的样式上。在mounted()钩子函数中，使用uni.$setStyle()方法来修改元素的样式。需要注意的是，使用uni.$setStyle()方法设置样式时，需要通过元素的$refs属性来获取元素的引用。