微信小程序中如何實(shí)現JS動(dòng)態(tài)修改樣式

這篇文章主要為大家展示了“微信小程序中如何實(shí)現JS動(dòng)態(tài)修改樣式”，內容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習一下“微信小程序中如何實(shí)現JS動(dòng)態(tài)修改樣式”這篇文章吧。

微信小程序這個(gè)坑啊，js動(dòng)態(tài)修改樣式，我們并不能用js或者jq 輕輕松松一行代碼搞定?；蛘哂胷emoveClass addClass 來(lái)修改樣式。

以下是一種動(dòng)態(tài)修改樣式的方法，原理是綁定數據，然后動(dòng)態(tài)的修改數據，從而實(shí)現動(dòng)態(tài)樣式的改變而已。感覺(jué)有點(diǎn)········那個(gè)啥的，怪怪的。不過(guò)也沒(méi)辦法了。如果你有更好的方法，可以在評論區分享一下。

test.wxml

<view >
 <label >我會(huì )變色</label>
 <button bindtap="clickRed">變紅</button>
 <button bindtap="clickgreen">變綠</button>
</view>

test.js

Page({
 data: {
 color: "red"
 },
 clickRed: function () {
 this.setData({
  color: "red"
 })
 },
 clickgreen: function () {
 this.setData({
  color: "green"
 })
 }
})

效果