微信小程序填坑之路之JS動(dòng)態(tài)修改樣式
- • 發(fā)表于 9年前
- • 作者 toBeMN
- • 10593 人瀏覽
- • 1 條評(píng)論
- • 最后編輯時(shí)間 9年前
- • 來自 [技 術(shù)]
原創(chuàng)聲明:本文為作者原創(chuàng)，未經(jīng)允許不得轉(zhuǎn)載，經(jīng)授權(quán)轉(zhuǎn)載需注明作者和出處
這個(gè)坑其實(shí)在社區(qū)已經(jīng)有人解答，只是在“問答”中不易被公眾發(fā)現(xiàn)，所以就特意的寫一篇，大家就不要在問了（笑哭表情），這是解答人的帖子 http://m.guanlustone.com/topic/313
建議：現(xiàn)在社區(qū)的問答回復(fù)需要點(diǎn)贊才能置頂（小聲說：我發(fā)現(xiàn)很多人都懶得點(diǎn)贊），所以建議Michael、小木老師整一個(gè)發(fā)文人自己選出最佳答案的功能
正題正題：由于小程序不支持DOM操作，也就沒有了獲取文檔對(duì)象的方法，所以不能再像以前寫網(wǎng)頁的方法來修改樣式
$("#xxx").css({})
但是有setData的存在，js就依然可以動(dòng)態(tài)修改樣，“簡”同學(xué)指出了三種方法
1.通過修改類名 <view class="{{className}}"></view>
2.添加一個(gè)類名，覆蓋前面的樣式 <view class="helplist {{cur}}"></view>
3.修改行內(nèi)樣式，覆蓋前面的樣式 <view class="helplist" style="{{currentStyle}}"></view>
這類方法在html中也是經(jīng)常使用的，封裝樣式讓代碼看的更舒服
接下來是一個(gè)例子
首先創(chuàng)建quickstart項(xiàng)目，通過點(diǎn)擊用戶頭像來修改HelloWord顏色
wxml文件
<view class="usermotto">
<text class="{{changeColor1}}">{{motto}}
</text>
<text class="user-motto {{changeColor2}}">{{motto}}
</text>
<text class="user-motto" style="{{changeDtl}}">{{motto}}</text>
</view>
分別對(duì)應(yīng)上面三種方法
wxss文件，預(yù)先定義好樣式
.usermotto {
margin-top: 200px;
}
.text-red{
color:red;
}
.text-blue{
color:blue;
}
js文件
最終效果：
