微信小程序 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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 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
对javascript和select部件的结合运用
2006/10/09 PHP
PHP伪造referer实例代码
2008/09/20 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
js实现动态时钟
2020/03/12 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python unittest模块用法实例分析
2018/05/25 Python
python装饰器常见使用方法分析
2019/06/26 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
校庆接待方案
2014/03/18 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
保姆聘用合同
2015/09/21 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android