微信小程序Js修改元素样式

要修改小程序中元素的样式，可以使用 WXML 和 WXSS。WXML 是小程序的视图层语言，类似于 HTML，用于描述页面结构。WXSS 则是小程序的样式语言，类似于 CSS，用于描述页面的样式。以下是修改元素样式的一些常见方法。

1. 使用内联样式

在 WXML 中，可以为元素添加 style 属性，来设置元素的内联样式。例如：

<view style="color: red; font-size: 16px;">这是一段红色的文字</view>

2. 使用 class

在 WXSS 中，可以定义一些 class，然后在 WXML 中为元素添加 class 属性，来应用这些样式。例如：

在 WXSS 中：

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

在 WXML 中：

<view class="red">这是一段红色的文字</view>

3. 动态修改样式

在小程序中，可以使用 setData 方法来动态修改元素的样式。例如：

在 WXML 中：

<view style="{{ textStyle }}">这是一段文字</view>

在 JS 中：

Page({
  data: {
    textStyle: 'color: red; font-size: 16px;'
  },
  changeTextStyle() {
    this.setData({
      textStyle: 'color: blue; font-size: 14px;'
    })
  }
})

在上面的例子中，我们在 data 中定义了一个 textStyle 变量，并将其绑定到了 view 元素的 style 属性上。然后，在 JS 中，我们定义了一个 changeTextStyle 方法，用来动态修改 textStyle 变量的值。当调用 changeTextStyle 方法时，会触发页面重新渲染，从而更新 view 元素的样式。