小程序通过js控制样式

最新推荐文章于 2023-09-28 10:24:10 发布

前端王小婷

最新推荐文章于 2023-09-28 10:24:10 发布

阅读量4.9k

点赞数 2

本文链接：https://blog.csdn.net/weixin_44763569/article/details/89399513

版权

本文提供了一个简单的微信小程序demo，展示如何通过JavaScript控制view元素的样式，例如点击事件触发背景色变为蓝色。同时，还讨论了一次性修改多个样式属性的方法，如同时更改背景色、字体颜色和字体大小。

摘要由CSDN通过智能技术生成

先写一个不怎么好看的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 &g

关注