小程序JS动态修改样式vv

简介: 小程序JS动态修改样式

先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色。

是这样的效果:

上一份小代码

index.wxml

<view >
  <view class="cont" style="background:{{background}};">属性改变</view>
  <button bindtap="tryDriver">测试</button>
</view>

index.wxss

.cont{
  height: 150rpx;
  line-height: 150rpx;
  text-align: center;
  border: 1px  solid  #89dcf8;
  margin-bottom:112rpx;
  margin:13rpx;
}

index.js

Page({
  data: {},
  tryDriver: function() {
    this.setData({
      background: "#89dcf8"
    })
  }
})
一次性修改多个属性,比如同时改变背景颜色,字体颜色,字体大小等样式

wxml:

<view >
  <view class="cont" style="background:{{background}};color:{{color}};height:{{height}}">属性改变</view>
  <button bindtap="tryDriver">测试</button>
</view>

js:

Page({
  data: {},
  tryDriver: function() {
    this.setData({
      background: "#89dcf8",
      color:'#ffffff',
      height:"322rpx"
    })
  }
})
替换图片
相关文章
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
|
2月前
|
小程序 前端开发 开发者
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
|
4月前
|
前端开发 JavaScript
纯样式或使用JS的canvas实现图片旋转
纯样式或使用JS的canvas实现图片旋转
31 0
|
4月前
|
小程序 前端开发 Android开发
解决小程序中textarea ios端样式不兼容的两种方法
解决小程序中textarea ios端样式不兼容的两种方法
|
2月前
|
JavaScript 小程序
微信小程序 wxml 中使用 js函数
微信小程序 wxml 中使用 js函数
78 0
|
19天前
|
小程序 开发工具 开发者
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
22 1
|
2月前
|
小程序
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
|
2月前
|
小程序 JavaScript 前端开发
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
|
2月前
|
JavaScript
JS动态转盘可自由设置个数与概率
JS动态转盘可自由设置个数与概率
|
2月前
|
JavaScript
JS动态参数arguments与剩余参数
JS动态参数arguments与剩余参数

热门文章

最新文章