style 对象 微信小程序_微信小程序填坑之路之JS动态修改样式

这个坑其实在社区已经有人解答，只是在“问答”中不易被公众发现，所以就特意的写一篇，大家就不要在问了(笑哭表情)，这是解答人的帖子 http://www.wxappclub.com/topic/313

建议：现在社区的问答回复需要点赞才能置顶(小声说：我发现很多人都懒得点赞)，所以建议Michael、小木老师整一个发文人自己选出最佳答案的功能

正题正题：由于小程序不支持DOM操作，也就没有了获取文档对象的方法，所以不能再像以前写网页的方法来修改样式

$("#xxx").css({})

但是有setData的存在，js就依然可以动态修改样，“简”同学指出了三种方法

1.通过修改类名

2.添加一个类名，覆盖前面的样式

3.修改行内样式，覆盖前面的样式

这类方法在html中也是经常使用的，封装样式让代码看的更舒服

接下来是一个例子

首先创建quickstart项目，通过点击用户头像来修改HelloWord颜色

wxml文件

{{motto}}

{{motto}}

{{motto}}

分别对应上面三种方法

wxss文件，预先定义好样式

.usermotto {

margin-top: 200px;

}

.text-red{

color:red;

}

.text-blue{

color:blue;

}

js文件

最终效果：

当然，我们是要做有逼格的程序员，请不要用第三种方法