微信小程序 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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
Vue.js动态组件解析
Sep 09 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
实例教学如何写vue插件
Nov 30 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
JS严格模式原理与用法实例分析
Apr 27 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
使用无限生命期Session的方法
2006/10/09 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php下Memcached入门实例解析
2015/01/05 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
详解Python 函数如何重载?
2019/04/23 Python
python web框架中实现原生分页
2019/09/08 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
收入及婚姻状况证明
2014/11/20 职场文书
党员心得体会范文2016
2016/01/23 职场文书
DSP接收机前端设想
2022/04/05 无线电
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL