微信小程序 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)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

基于Bootstrap 3 JQuery及RegExp的表單驗證功能
這篇文章主要介紹了基于Bootstrap 3 JQuery及RegExp的表單驗證功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
JavaScript?getter?setter金字塔???????
這篇文章主要介紹了JavaScript?getter?setter金字塔???????，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-08-08
JavaScript實現(xiàn)給按鈕加上雙重動作的方法
這篇文章主要介紹了JavaScript實現(xiàn)給按鈕加上雙重動作的方法,可實現(xiàn)文本框元素值添加及頁面跳轉(zhuǎn)的功能,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
js實現(xiàn)div拖動動畫運行軌跡效果代碼分享
這篇文章主要介紹了js實現(xiàn)div拖動動畫運行軌跡效果，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
使用JS實現(xiàn)簡易計算器
這篇文章主要為大家詳細介紹了使用JS實現(xiàn)簡易計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
解決在Bootstrap模糊框中使用WebUploader的問題
這篇文章主要介紹了在Bootstrap模糊框中使用WebUploader的問題及解決方法，,需要的朋友可以參考下
2018-03-03
原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能詳解【測試可用】
這篇文章主要介紹了原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能,結(jié)合實例形式詳細分析了javascript事件響應及頁面元素屬性動態(tài)操作實現(xiàn)滑塊拖動功能的相關操作技巧,需要的朋友可以參考下
2019-08-08
js實現(xiàn)iframe動態(tài)調(diào)整高度的代碼
iframe,尤其是不帶邊框的iframe因為能和網(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分數(shù)據(jù)成為可能，可是iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩，給iframe設置高度的時候多了也不好，少了更是不行，現(xiàn)在，讓我來告訴大家一種iframe動態(tài)調(diào)整高度的方法，主要是以下JS函數(shù)：
2008-01-01
JS實現(xiàn)獲取數(shù)組中最大值或最小值功能示例
這篇文章主要介紹了JS實現(xiàn)獲取數(shù)組中最大值或最小值功能,結(jié)合實例形式總結(jié)分析了javascript獲取數(shù)組最大值與最小值的三種常見操作技巧,需要的朋友可以參考下
2019-03-03
理解Javascript_02_理解undefined和null
其實在 ECMAScript 的原始類型中，是有Undefined 和 Null 類型的。這兩種類型都分別對應了屬于自己的唯一專用值，即undefined 和 null。
2010-10-10