小程序JS动态修改样式vv

简介: 小程序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"
    })
  }
})
替换图片
相关文章
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
529 1
|
1月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
60 0
微信小程序:自定义关注公众号组件样式
|
1月前
|
移动开发 前端开发 JavaScript
JavaScript 中的样式切换方法
JavaScript 中的样式切换方法
14 0
|
3月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
101 0
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
3月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
3月前
|
小程序 JavaScript
|
3月前
|
移动开发 前端开发 JavaScript
JavaScript 中的样式切换方法
JavaScript 中的样式切换方法
25 0
|
3月前
|
JavaScript 前端开发
使用 JavaScript 的 classList 方法轻松切换样式
使用 JavaScript 的 classList 方法轻松切换样式
35 0
|
4月前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
31 0
JS代码动态打印404页面源码
|
4月前
|
小程序
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异