这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了微信小程序 JS 动态修改样式的实现代码, 原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已, 需要的朋友可以参考下
微信小程序这个坑啊,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 动态修改样式的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0630/327835.html