微信小程式 JS動態修改樣式的實作程式碼

微信小程式這個坑啊，js動態修改樣式，我們並不能用js或jq 輕輕鬆鬆一行程式碼搞定。或用removeClass addClass 來修改樣式。

以下是一種動態修改樣式的方法，原理是綁定數據，然後動態的修改數據，從而實現動態樣式的改變而已。感覺有點·······那個啥的，怪怪的。不過也沒辦法了。如果你有更好的方法，可以在評論區分享一下。

test.wxml

<view style="text-align: center;">
 <label style="color:{{color}};">我会变色</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"
 })
 }
})

化對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持！

更多微信小程式 JS動態修改樣式的實現代碼相關文章請關注PHP中文網！