微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)方法
更新時(shí)間：2018年12月16日 11:37:58 作者：祈澈菇?jīng)?
這篇文章主要給大家介紹了關(guān)于微信小程序JS動(dòng)態(tài)修改樣式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
前言
本文主要介紹了關(guān)于微信小程序 JS動(dòng)態(tài)修改樣式的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧
先寫一個(gè)不怎么好看的demo，通過(guò)點(diǎn)擊事件來(lái)控制view的元素屬性，把背景改變成藍(lán)色。
是這樣的效果：
代碼如下：
上一份小代碼
index.wxml
<view >
<view class="cont" style="background:{{background}};">屬性改變</view>
<button bindtap="tryDriver">測(cè)試</button>
</view>
index.wxss
.cont{
height: 150rpx;
line-height: 150rpx;
text-align: center;
border: 1px solid #89dcf8;
margin-bottom:112rpx;
margin:13rpx;
}
index.js
Page({
data: {},
tryDriver: function() {
this.setData({
background: "#89dcf8"
})
}
})
一次性修改多個(gè)屬性，比如同時(shí)改變背景顏色，字體顏色，字體大小等樣式
wxml:
<view >
<view class="cont" style="background:{{background}};color:{{color}};height:{{height}}">屬性改變</view>
<button bindtap="tryDriver">測(cè)試</button>
</view>
js:
Page({
data: {},
tryDriver: function() {
this.setData({
background: "#89dcf8",
color:'#ffffff',
height:"322rpx"
})
}
})
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了JavaScript事件委托的用法,以實(shí)例形式分析了javascript事件委托的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了使用javascript如何生成隨機(jī)顏色,需要的朋友可以參考下2014-05-05
js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
js 頁(yè)面?zhèn)鲄?shù)時(shí) 參數(shù)值含特殊字符的問(wèn)題
解決方法就是利用js的escape函數(shù)，這個(gè)函數(shù)在解決中文亂碼等方面應(yīng)用的比較廣泛。推薦使用。2009-12-12
javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
JS中innerHTML和pasteHTML的區(qū)別實(shí)例分析
這篇文章主要介紹了JS中innerHTML和pasteHTML的區(qū)別,結(jié)合實(shí)例形式較為詳細(xì)的分析了innerHTML和pasteHTML的具體功能與使用區(qū)別,需要的朋友可以參考下2016-06-06
uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法
計(jì)時(shí)器在日常開發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
小程序選項(xiàng)卡以及swiper套用（跨頁(yè)面）
這篇文章主要為大家詳細(xì)介紹了小程序選項(xiàng)卡以及swiper套用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
常見Ajax下載文件方式以及報(bào)錯(cuò)解決辦法
AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建快速、動(dòng)態(tài)和交互式網(wǎng)頁(yè)的技術(shù),它的主要優(yōu)勢(shì)在于能夠在不刷新整個(gè)網(wǎng)頁(yè)的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互,這篇文章主要給大家介紹了關(guān)于常見Ajax下載文件方式以及報(bào)錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下2024-01-01
JavaScript實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09