Uinapp中js修改css变量,【前端技术】uniapp操作dom，改变css样式

在uniapp中，我们可以使用以下方法来修改CSS变量：

1. 获取DOM元素：通过uni.createSelectorQuery()方法获取需要修改的DOM元素。

2. 设置样式：通过element.style.setProperty()方法设置CSS变量的值。

下面是一个示例代码：

<template>
  <view class="container">
    <view class="box" ref="box"></view>
  </view>
</template>

<script>
export default {
  methods: {
    changeColor() {
      // 获取DOM元素
      const box = uni.createSelectorQuery().in(this).select('.box')
      box.fields({ computedStyle: ['backgroundColor'] }, (res) => {
        const color = res.computedStyle.backgroundColor
        // 设置样式
        box.node.style.setProperty('--bg-color', color)
      }).exec()
    }
  }
}
</script>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: var(--bg-color, #fff);
  }
</style>

在上述代码中，我们通过uni.createSelectorQuery()方法获取了.box元素，并通过box.fields()方法获取了它的背景色。然后，我们使用box.node.style.setProperty()方法来设置--bg-color变量的值为获取到的背景色。最后，我们在样式中使用了--bg-color变量。

当我们调用changeColor()方法时，就会修改.box元素的--bg-color变量，从而改变其背景色。