微信小程序js添加css样式

给你个小例子，

wxml 里面

<button bindtap="changeColor" hover-class="none">点击修改背景颜色</button>

js

Page({

data: {

pageBackgroundColor:'#5cb85c'

},

onLoad: function () {},

// 改变背景颜色

changeColor: function() {

var bgColor = this.data.pageBackgroundColor == '#e43a3d' ? '#5cb85c' : '#e43a3d'

// 设置背景颜色数据

this.setData( {

pageBackgroundColor: bgColor

} )

}

})

第一步，把要改变样式添加到相应js文件的全局变量中，如： data : { color : '#000' }

第二步，将变量绑定到view中,如：<view style="color:{{color}}">

第三步，在view中添加事件，如： bindtap="changeColor"

第四步，在相应js文件中添加该自定义方法：

, changeColor: function(e){

this.setData({ color : '#fff' })

}

1、小程序不是运行在浏览器中，所以没有DOM和BOM对象

2、小程序的JS有一些额外的成员

App方法 用于定义应用程序实例对象

Page方法 用于定义页面对象

getApp方法 用于获取全局应用程序对象

getCurrentPages方法 用来获取当前页面的调用栈（数组 最后一个就是当前页

wx对象 用来提供核心api的 官方链接： https://developers.weixin.qq.com/miniprogram/dev/api/

3、小程序JS是支持CommonJS规范的

eg:

./utils/foo.js文件

function say(msg){

    console.log("hello"+msg)

}

module.exports = {

    say:say

}

app.js文件

const foo = require("./utils/foo.js")

foo.say("hi")

---