微信小程序 JS动态修改样式的实现方法


Posted in Javascript onDecember 16, 2018

前言

本文主要介绍了关于微信小程序 JS动态修改样式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

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

是这样的效果:

微信小程序 JS动态修改样式的实现方法

代码如下:

上一份小代码

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"
 })
 }
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
详解JavaScript 事件流
Sep 02 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 #Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 #Javascript
antd Upload 文件上传的示例代码
Dec 14 #Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 #Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 #Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 #Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
jquery实现数字输入框
2017/02/22 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
python素数筛选法浅析
2018/03/19 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
python调用私有属性的方法总结
2020/07/24 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
20岁生日感言
2014/01/13 职场文书
环保专项行动方案
2014/05/12 职场文书
项目工作说明书
2014/07/29 职场文书
党委班子剖析材料
2014/08/21 职场文书
物流管理专业推荐信
2014/09/06 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript