微信小程序点击按钮,更改css样式
时间: 2023-07-13 10:05:15 浏览: 394
可以通过以下步骤更改微信小程序中的 CSS 样式:
1. 在对应页面的 WXML 文件中,给需要更改样式的元素添加一个 ID 或 Class。
2. 在对应页面的 WXSS 文件中,编写需要更改的 CSS 样式,可以使用 ID 或 Class 选择器来选取元素。
3. 在 JS 中获取该元素的 ID 或 Class。
4. 在 JS 中编写点击事件的回调函数,并在其中通过 `setData` 方法更新该元素的样式。
下面是一个示例代码,假设需要更改一个按钮的颜色:
WXML 文件:
```html
<view class="container">
<button id="myButton">点击我</button>
</view>
```
WXSS 文件:
```css
#myButton {
background-color: #ccc;
}
```
JS 文件:
```javascript
Page({
data: {
buttonColor: '#ccc'
},
changeColor: function () {
this.setData({
buttonColor: '#f00'
})
}
})
```
在点击事件的回调函数中通过 `setData` 方法更新按钮的颜色:
```html
<button id="myButton" style="background-color:{{buttonColor}}" bindtap="changeColor">点击我</button>
```