小程序开发JS动态修改样式教程

面向对象开发现阶段互联网流行的开发模式，许多主流开发语言也是属于面向对象开发，是建立在“对象”概念基础上的方法学。由于小程序不是基于web因此不支持dom操作，也就没有了获取文档对象的方法，所以不能再像以前写网页$(#xxx).css({})的方法来修改样式。小程序无法获取dom对象,如何修改样式？

但是小程序有setData的存在，js就依然可以动态修改样，

1.通过修改类名

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

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

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

创建一个项目测试，通过点击用户头像来修改HelloWord颜色：

wxml文件分别对应上面三种方法

 wxss文件，预先定义好样式

.usermotto {

  margin-top: 200px;

}

.text-red{

  color:red;

}

.text-blue{

  color:blue;

}

js文件中 

page({

data:{

motto:’Hello World’,

userInfo:{},

changeColor1:””,

changeColor2:””,

changeDtl:””},

//事件处理函数

bindViewTap:function(){

this.setData({

changeColor1: ”text-red”,

changeColor2: ”text-blue”,

changeDtl: ”color:yellow”})

},

最终效果：

结论：wxss文件其实就是html的css文件一样的，只是wxss支持的属性会比css少一些。小程序开发中即使不能获取对象修改属性，也可以通过上述三种方法修改JS动态样式。

推荐阅读：微信小程序开发图片处理教程