WXML

<view class="page" style="background-color:{{pageBackgroundColor}}" >
<button bindtap="changeColor" hover-class="none">点击修改背景颜色</button>
</view>

WXSS:

.page {
display: block;
min-height: %;
width: %;
position: absolute;
left: ;
top: ;
z-index: ;
}

JS:

Page({
data: {
// 自定义page对象CSS样式对象
pageBackgroundColor: '#5cb85c'
},
onLoad: function () { },
// 改变背景颜色
changeColor: function () {
var bgColor = this.data.pageBackgroundColor == 'red' ? '#5cb85c' : 'red';
// 设置背景颜色数据
this.setData({
pageBackgroundColor: bgColor
});
}
})

微信小程序通过js动态修改css样式的方法(交流QQ群:604788754)的更多相关文章

  1. 微信小程序通过JS动态修改页面标题setNavigationBarTitle

    wx.setNavigationBarTitle({title: '当前页面'})

  2. 小程序中的bindtap和catchtap的区别(交流QQ群:604788754)

    bindtap绑定的节点,如果他的父节点也有绑定事件,点击之后就会出现冒泡. catchtap绑定的节点,如果他的父节点也有绑定事件,点击之后不会出现冒泡.

  3. 微信小程序:JS 交互逻辑

    微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...

  4. 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程

    一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...

  5. 原创:新手布局福音!微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  6. 微信小程序:封装全局的promise异步调用方法

    微信小程序:封装全局的promise异步调用方法 一:封装 function POST(url, params) { let promise = new Promise(function (resol ...

  7. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  8. 微信小程序开发:学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  9. 微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar

    在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修 ...

随机推荐

  1. div转svg svg转canvas svg生成图片及图片下载 分享

    链接来自:http://blog.csdn.net/u010081689/article/details/50728854

  2. Go第二篇之基本语法总结

    Go语言标识符 标识符以字母或下划线开头,大小写敏感 _是特殊标识符,用来忽略结果 Go语言变量的声明 变量(Variable)的功能是存储用户的数据.不同的逻辑有不同的对象类型,也就有不同的变量类型 ...

  3. Mac安装和卸载HomeBrew

    安装方法: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/ ...

  4. Luogu USACO Training 刷水记录

    开个坑记录一下刷USACO的Training的记录 可能会随时弃坑 只有代码和做法简述 可能没有做法简述 [USACO1.1]你的飞碟在这儿Your Ride Is He… 模拟,细节已忘 #incl ...

  5. C# Byte[] 数组操作

    byte[] Strbyte = Encoding.GetEncoding("big5").GetBytes(str);            if (Strbyte.Length ...

  6. NOI 08 石头剪刀布

    石头剪刀布(NOI 08) 总时间限制: 1000ms 内存限制: 65536kB 描述 石头剪刀布是常见的猜拳游戏.石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负. 一天,小A和小B ...

  7. Linux——用户管理简单学习笔记(二)

    其实如果我们了解了Linux中用户管理的配置文件之后,完全可以手工管理用户: 添加用户: useradd 设置选项 用户名 -D 查看缺省参数 u:UID g:缺省所属用户组GID G:指定用户所属多 ...

  8. TDD、BDD、DDD

    TDDTest-Driven DevelopmentTest-Driven Development (TDD) is a software development technique where au ...

  9. SQL Insert Case When Update

    CREATE TABLE LoadTestTable ( ID INT IDENTITY(1,1), FIRSTNAME VARCHAR(50), LASTNAME VARCHAR(50), GEND ...

  10. Asp.net Ajax(ashx)

    主要实现 ajax分页功能 效果图 后台方法代码展示 /// <summary> /// WebAjax处理类 /// </summary> public class WebA ...