微信小程序 JS动态修改样式的实现代码


Posted in Javascript onFebruary 10, 2017

微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定。或者用removeClass addClass 来修改样式。

以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已。感觉有点········那个啥的,怪怪的。不过也没办法了。如果你有更好的方法,可以在评论区分享一下。

test.wxml

<view style="text-align: center;">
 <label style="color:{{color}};">我会变色</label>
 <button bindtap="clickRed">变红</button>
 <button bindtap="clickgreen">变绿</button>
</view>

test.js

Page({
 data: {
 color: "red"
 },
 clickRed: function () {
 this.setData({
  color: "red"
 })
 },
 clickgreen: function () {
 this.setData({
  color: "green"
 })
 }
})

效果

微信小程序 JS动态修改样式的实现代码

以上所述是小编给大家介绍的微信小程序 JS动态修改样式的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 操作DOM案例代码分享
Apr 05 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
跟我学习javascript的this关键字
May 28 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 #Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 #Javascript
基于jQuery实现弹幕APP
Feb 10 #Javascript
BOM之navigator对象和用户代理检测
Feb 10 #Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 #Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
You might like
制作美丽的拉花
2021/03/03 冲泡冲煮
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
python识别验证码图片实例详解
2020/02/17 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
简历中自我评价分享
2013/10/09 职场文书
教师师德演讲稿
2014/05/06 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
三八妇女节标语
2014/10/09 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android