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

  • • 发表于 3个月前
  • • 作者 toBeMN
  • • 467 次浏览
  • • 1 条评论
  • • 最后编辑时间 3个月前
  • • 来自 [技术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

这个坑其实在社区已经有人解答,只是在“问答”中不易被公众发现,所以就特意的写一篇,大家就不要在问了(笑哭表情),这是解答人的帖子 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文件

最终效果:

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

分享到:
评论区(共1条评论)
1条评论
Ctrl+Enter
作者

toBeMN

toBeMN

APP:3 帖子:23 回复:59 积分:2452

已加入社区[110]天

梦想成为全栈的男人

作者详情》
精品推荐课程更多
扫码入群
Top