小程序JS动态修改样式

先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色。

是这样的效果:

5640239-83d248124c707a53.gif

上一份小代码
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.jianshu.com/u/05f416aefbe1
90后前端妹子一枚,爱编程,爱运营,爱折腾。长期坚持总结工作中遇到的技术问题。

热门推荐:前端,Java,产品经理,微信小程序,Python等200G资源合集大放送

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值