微信開發之JS動態修改樣式

這篇文章主要介紹了微信小程式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"
 })
 }
})

效果

##【相關推薦】

1. 

微信開發之如何呼叫全域JS？

2. 

微信開發之引用其他js檔案實例詳解

#3.

 微信開發生命週期函數的實例教學#

以上是微信開發之JS動態修改樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！