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

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

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

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

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

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

1.通过修改类名 <view class="{{className}}"></view>
2.添加一个类名，覆盖前面的样式 <view class="helplist {{cur}}"></view>
3.修改行内样式，覆盖前面的样式 <view class="helplist" style="{{currentStyle}}"></view>
这类方法在html中也是经常使用的，封装样式让代码看的更舒服

接下来是一个例子
首先创建quickstart项目，通过点击用户头像来修改HelloWord颜色

wxml文件

<view class="usermotto">
  <text class="{{changeColor1}}">{{motto}}
</text>
  <text class="user-motto {{changeColor2}}">{{motto}}
</text>
  <text class="user-motto" style="{{changeDtl}}">{{motto}}</text>
</view>

分别对应上面三种方法

wxss文件，预先定义好样式

.usermotto {
  margin-top: 200px;
}
.text-red{
  color:red;
}
.text-blue{
  color:blue;
}

js文件

最终效果：

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