微信小程序通过js动态修改css样式的方法(交流QQ群:604788754)
WXML
<view class="page" style="background-color:{{pageBackgroundColor}}" > <button bindtap="changeColor" hover-class="none">点击修改背景颜色</button> </view>
WXSS:
.page { display: block; min-height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 1; }
JS:
Page({ data: { // 自定义page对象CSS样式对象 pageBackgroundColor: '#5cb85c' }, onLoad: function () { }, // 改变背景颜色 changeColor: function () { var bgColor = this.data.pageBackgroundColor == 'red' ? '#5cb85c' : 'red'; // 设置背景颜色数据 this.setData({ pageBackgroundColor: bgColor }); } })