因为小程序里面没有DOM操作,所以不能像JS或者jq一样,一两行代码切换类
下面教大家一个简单的方法在小程序中动态改变字体的颜色
方法1:
- wxml中:
<view class="classname" bindtap="changeColor" style="color:{{color}}">改变颜色</view> /*创建一个view标签然后添加bindtap事件*/
- js中:
Page({
changeColor:function(){
var color = this.data.color == "red"?"green":"red";
this.setData({
color:color
})
}
})
方法2:
- wxml中:
<view style="color:{{color}};">我会变色</view>
<button bindtap="clickRed">变红</button>
<button bindtap="clickgreen">变绿</button>
- js中:
Page({
data:{
color:"red"
}
clickRed: function () {
this.setData({
color: "red"
})
},
clickgreen: function () {
this.setData({
color: "green"
})
}
})