快捷導(dǎo)航

微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼

更新時(shí)間：2017年02月10日 13:48:06 作者：huangenai

這篇文章主要介紹了微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼,原理是綁定數(shù)據(jù)，然后動(dòng)態(tài)的修改數(shù)據(jù)，從而實(shí)現(xiàn)動(dòng)態(tài)樣式的改變而已,需要的朋友可以參考下

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

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

test.wxml

<view style="text-align: center;">
 <label style="color:{{color}};">我會(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"
 })
 }
})

效果

以上所述是小編給大家介紹的微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)二分查找法實(shí)現(xiàn)代碼
javascript實(shí)現(xiàn)二分查找法實(shí)現(xiàn)代碼...
2007-11-11
js實(shí)現(xiàn)高精度加減乘除模板的示例代碼
這篇文章給大家介紹了如何使用js實(shí)現(xiàn)高精度加減乘除模板,文章通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動(dòng)手嘗試一下
2023-10-10
淺談JS三座大山之異步和單線程
首先我們要知道，js這門(mén)語(yǔ)言是單線程的，同時(shí)只能做一件事，比如說(shuō)渲染dom，執(zhí)行js方法，這些事情只能一個(gè)一個(gè)做，不能分開(kāi)執(zhí)行。（因?yàn)閖s需要操作dom，當(dāng)兩個(gè)js方法同時(shí)操作一個(gè)dom的時(shí)候就會(huì)出問(wèn)題，所以js被設(shè)計(jì)成了單線程）。本文將介紹JS三座大山之異步和單線程。
2021-06-06
前端js中的事件循環(huán)eventloop機(jī)制詳解
這篇文章主要給大家介紹了關(guān)于前端js中事件循環(huán)eventloop機(jī)制的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
javascript 循環(huán)調(diào)用示例介紹
循環(huán)調(diào)用,如果已經(jīng)獲取到了結(jié)果,則退出循環(huán)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以嘗試操作下
2013-11-11
JavaScript 正則表達(dá)式詳解
正則表達(dá)式(Regular Expression)是一門(mén)簡(jiǎn)單語(yǔ)言的語(yǔ)法規(guī)范，是強(qiáng)大、便捷、高效的文本處理工具，它應(yīng)用在一些方法中，對(duì)字符串中的信息實(shí)現(xiàn)查找、替換和提取操作
2021-11-11
JS擴(kuò)展類(lèi)，克隆對(duì)象與混合類(lèi)實(shí)例分析
這篇文章主要介紹了JS擴(kuò)展類(lèi)，克隆對(duì)象與混合類(lèi),通過(guò)自定義extend,clone與augment函數(shù)實(shí)例分析了類(lèi)的擴(kuò)展，對(duì)象的克隆與混合類(lèi)相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下
2016-11-11
JS同源策略和跨域問(wèn)題深入分析和解決
這篇文章主要介紹了JS同源策略和跨域問(wèn)題深入分析和解決,在Web開(kāi)發(fā)中,跨域問(wèn)題是一個(gè)常見(jiàn)且必須解決的難題,當(dāng)瀏覽器出于安全考慮限制不同源之間的資源交互時(shí),開(kāi)發(fā)者需要掌握多種方案來(lái)繞過(guò)這些限制,需要的朋友可以參考下
2025-02-02
JS字符串常用操作方法實(shí)例小結(jié)
這篇文章主要介紹了JS字符串常用操作方法,結(jié)合實(shí)例形式總結(jié)分析了javascript字符串獲取、返回、拼接、替換、搜索、計(jì)算等相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
以JavaScript來(lái)實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法
這篇文章主要介紹了以JavaScript來(lái)實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法,文中首先對(duì)WordPress基本的PHP導(dǎo)航菜單的做法給出了說(shuō)明來(lái)作為基礎(chǔ),需要的朋友可以參考下
2015-12-12