微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)方法
前言
本文主要介紹了關(guān)于微信小程序 JS動(dòng)態(tài)修改樣式的相關(guān)內(nèi)容,分享出來供大家參考學(xué)習(xí),下面話不多說了,來一起看看詳細(xì)的介紹吧
先寫一個(gè)不怎么好看的demo,通過點(diǎn)擊事件來控制view的元素屬性,把背景改變成藍(lán)色。
是這樣的效果:
代碼如下:
上一份小代碼
index.wxml
<view > <view class="cont" style="background:{{background}};">屬性改變</view> <button bindtap="tryDriver">測試</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">測試</button> </view>
js:
Page({ data: {}, tryDriver: function() { this.setData({ background: "#89dcf8", color:'#ffffff', height:"322rpx" }) } })
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
基于Bootstrap 3 JQuery及RegExp的表單驗(yàn)證功能
這篇文章主要介紹了基于Bootstrap 3 JQuery及RegExp的表單驗(yàn)證功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02JavaScript?getter?setter金字塔???????
這篇文章主要介紹了JavaScript?getter?setter金字塔???????,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08JavaScript實(shí)現(xiàn)給按鈕加上雙重動(dòng)作的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)給按鈕加上雙重動(dòng)作的方法,可實(shí)現(xiàn)文本框元素值添加及頁面跳轉(zhuǎn)的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08js實(shí)現(xiàn)div拖動(dòng)動(dòng)畫運(yùn)行軌跡效果代碼分享
這篇文章主要介紹了js實(shí)現(xiàn)div拖動(dòng)動(dòng)畫運(yùn)行軌跡效果,推薦給大家,有需要的小伙伴可以參考下。2015-08-08解決在Bootstrap模糊框中使用WebUploader的問題
這篇文章主要介紹了在Bootstrap模糊框中使用WebUploader的問題及解決方法,,需要的朋友可以參考下2018-03-03原生js實(shí)現(xiàn)可兼容PC和移動(dòng)端的拖動(dòng)滑塊功能詳解【測試可用】
這篇文章主要介紹了原生js實(shí)現(xiàn)可兼容PC和移動(dòng)端的拖動(dòng)滑塊功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)滑塊拖動(dòng)功能的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08js實(shí)現(xiàn)iframe動(dòng)態(tài)調(diào)整高度的代碼
iframe,尤其是不帶邊框的iframe因?yàn)槟芎途W(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分?jǐn)?shù)據(jù)成為可能,可是iframe的大小卻不像層那樣可以“伸縮自如”,所以帶來了使用上的麻煩,給iframe設(shè)置高度的時(shí)候多了也不好,少了更是不行,現(xiàn)在,讓我來告訴大家一種iframe動(dòng)態(tài)調(diào)整高度的方法,主要是以下JS函數(shù):2008-01-01JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能,結(jié)合實(shí)例形式總結(jié)分析了javascript獲取數(shù)組最大值與最小值的三種常見操作技巧,需要的朋友可以參考下2019-03-03理解Javascript_02_理解undefined和null
其實(shí)在 ECMAScript 的原始類型中,是有Undefined 和 Null 類型的。 這兩種類型都分別對(duì)應(yīng)了屬于自己的唯一專用值,即undefined 和 null。2010-10-10