微信小程序 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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
微信小程序 开发之全局配置
May 05 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
Js类的构建与继承案例详解
Sep 15 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
单位速度在实战中的运用
2020/03/04 星际争霸
PHP分页显示制作详细讲解
2006/10/09 PHP
模仿OSO的论坛(一)
2006/10/09 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP闭包函数详解
2016/02/13 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
基于jquery的cookie的用法
2011/01/10 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JS之相等操作符详解
2016/09/13 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
为Python程序添加图形化界面的教程
2015/04/29 Python
Python快速排序算法实例分析
2017/11/29 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
医学生自我鉴定范文
2014/03/26 职场文书
安全温馨提示语大全
2015/07/14 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
PHP中strval()函数实例用法
2021/06/07 PHP
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL