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