WXML

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

WXSS:

  1. .page {
  2. display: block;
  3. min-height: %;
  4. width: %;
  5. position: absolute;
  6. left: ;
  7. top: ;
  8. z-index: ;
  9. }

JS:

  1. Page({
  2. data: {
  3. // 自定义page对象CSS样式对象
  4. pageBackgroundColor: '#5cb85c'
  5. },
  6. onLoad: function () { },
  7. // 改变背景颜色
  8. changeColor: function () {
  9. var bgColor = this.data.pageBackgroundColor == 'red' ? '#5cb85c' : 'red';
  10. // 设置背景颜色数据
  11. this.setData({
  12. pageBackgroundColor: bgColor
  13. });
  14. }
  15. })

微信小程序通过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. Android widget

    1,TextView :走马灯效果 2,EditText ,AutoCompleteText MutiAutoCompleteTextView 3,Button,ImageButton,RadioBu ...

  2. git如何列出最简短的commit(tag和head名都不显示)

    答:git log --oneline --no-decorate --oneline: 将commit显示成一行 --no-decorate: 将tag和head名隐藏掉

  3. HDU 4734 (数位DP)题解

    思路: dp[pos][pre]代表长度为pos的不大于pre的个数 #include<iostream> #include<cstdio> #include<cstri ...

  4. HDU 2243 考研路茫茫——单词情结(AC自动机+矩阵快速幂)

    http://acm.hdu.edu.cn/showproblem.php?pid=2243 题意: 给出m个模式串,求长度不超过n的且至少包含一个模式串的字符串个数. 思路: 如果做过poj2778 ...

  5. JObject 用法 、JProperty 用法、JArray 用法 Linq 转 Json

    1.使用LINQ to JSON前,需要引用Newtonsoft.Json的dll和using Newtonsoft.Json.Linq的命名空间.LINQ to JSON主要使用到JObject, ...

  6. shell 基本操作小结

    1.echo和if else fi命令 #!/bin/bash echo hello;echo there filename=demo.sh if [ -e "$filename" ...

  7. ubuntu 14.04 (desktop amd 64) 安装和配置ROS Indigo

    安装ROS 配置Ubuntu的软件源 配置Ubuntu要求允许接受restricted.universe和multiverse的软件源,可以根据下面的链接配置: https://help.ubuntu ...

  8. Jmeter性能测试 对服务器使用资源进行监控之ServerAgent插件使用

    百度云盘友情赞助地址如下: 链接:https://pan.baidu.com/s/1cpAeOcfFX8kss1eo79UD9g 密码:b8o7 在windows上或者linux上打开服务 用Jmet ...

  9. Cassandra学习笔记

    CASSANDRA在工作中用过,但是用的项目少,能用却了解的不全面.今天来稍加学习下: http://zqhxuyuan.github.io/2015/10/15/Cassandra-Daily/  ...

  10. Codeforces 861D - Polycarp's phone book

    861D - Polycarp's phone book 思路:用map做的话,只能出现一次循环,否则会超时. 代码: #include<bits/stdc++.h> using name ...