小程序JS动态修改样式

先写一个不怎样好看的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"    })  }})

原文作者：祈澈姑娘。 技术博客：https://www.songma.com/u/05f416aefbe1
90后前台妹子一枚，爱编程，爱经营，爱折腾。长期坚持总结工作中遇到的技术问题。