微信小程序 js改变css

// 在页面的 data 中定义一个样式变量
Page({
  data: {
    customStyle: 'color: red;'
  },
  changeColor: function() {
    // 改变样式变量
    this.setData({
      customStyle: 'color: blue;'
    });
  }
});

<!-- 在 WXML 中使用这个样式变量 -->
<view style="{{customStyle}}">这是一个可以改变颜色的文本</view>
<button bindtap="changeColor">点击改变颜色</button>

Page({
  changeColorDirectly: function() {
    const query = wx.createSelectorQuery();
    query.select('#targetElement').fields({ node: true, size: true }).exec((res) => {
      const node = res[0].node;
      const style = node.style;
      style.color = 'green';
      // 注意：这里需要重新设置样式才能生效
      node.setAttribute('style', style.cssText);
    });
  }
});

<!-- 在 WXML 中定义一个目标元素 -->
<view id="targetElement">这是一个可以通过代码直接改变颜色的文本</view>
<button bindtap="changeColorDirectly">点击直接改变颜色</button>