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. 20145127《java程序设计》第四周学习总结

    教材学习内容总结 第六章 继承与多态 6.1 何为继承 0.面向对象中,子类继承父类,避免城府的行为定义.正确判断使用继承的时机,以及继承之后如何活用多态,才是学习继承时的重点. 1.继承:避免多个类 ...

  2. 20145310《网络对抗》Exp2 后门原理与实践

    实验内容 (1)使用netcat获取主机操作Shell,cron启动,使用socat获取主机操作Shell, 任务计划启动. (2)使用MSF meterpreter生成可执行文件,利用ncat或so ...

  3. cogs 330. [NOI2003] 文本编辑器

    ★★★   输入文件:editor2003.in   输出文件:editor2003.out   简单对比 时间限制:2 s   内存限制:128 MB [问题描述] 很久很久以前,DOS3.x的程序 ...

  4. Linux中设备号及设备文件【转】

    本文转载自:http://blog.csdn.net/ymangu666/article/details/39292651 主.次设备号 应用程序可以通过对/dev 目录下的设备文件读写,从而访问实际 ...

  5. JavaScript:Array属性方法

    ,,,,]; console.dir(arr); var pro=Object.getPrototypeOf(arr); console.dir(pro); 来一个个的查看数组的属性,方法 1.Arr ...

  6. 使用CLR Profiler查看C#运行程序的内存占用情况

    http://blog.csdn.net/wy3552128/article/details/8158938 https://msdn.microsoft.com/en-us/library/ff65 ...

  7. Mac OS下 selenium 驱动safari日志

    /Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/bin/java "-javaagent:/Applicat ...

  8. Qt_OpenGL_教程

    1. 中文版: Qt OpenGL教程 http://blog.csdn.net/myths_0/article/details/24431597 http://qiliang.net/old/neh ...

  9. Intellij IDEA 搭建Spring Boot项目(一)

    原文出处 第一步选择File –> New –> Project –>Spring Initialer –> 点击Next 第二步自己修改 Group 和 Artifact 字 ...

  10. 各种容器与服务器的区别与联系 Servlet容器 WEB容器 Java EE容器 应用服务器 WEB服务器 Java EE服务器

    转自:https://blog.csdn.net/tjiyu/article/details/53148174 各种容器与服务器的区别与联系 Servlet容器 WEB容器 Java EE容器 应用服 ...