微信小程序js添加css属性

index.wxml

< view class= "page" style= "background-color:{{pageBackgroundColor}}" >

    < button bindtap= "changeColor" hover-class= "none">

        点击修改背景颜色

    </ button >

</ view >

index.wxss

.page {

display: block;

min-height: 100%;

width: 100%;

position: absolute;

left: 0;

top: 0;

z-index: 1;

}

inde.js

Page({

data: {

// 自定义page对象CSS样式对象

pageBackgroundColor:'#5cb85c'

},

onLoad: function () {},

// 改变背景颜色

changeColor: function() {

var bgColor = this.data.pageBackgroundColor == 'red' ? '#5cb85c' : 'red';

// 设置背景颜色数据

this.setData( {

pageBackgroundColor: bgColor

} );

}

})