微信小程序实现通过js操作wxml的wxss属性示例

本文实例讲述了微信小程序实现通过js操作wxml的wxss属性。分享给大家供大家参考，具体如下：

微信小程序如何通过js操作html的css属性：

在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。

微信小程序中，不能通过这种方式进行操作。

如何在微信小程序中在wxml中操作wxss的属性。

实现思路：

通过利用数据绑定实现动态改变样式，

1、在wxxml标签内嵌css属性上绑定js的date值

2、通过js中绑定css属性的date值改变wxml标签内嵌的css属性

实现效果：点击所在地区，弹出选择地区的浮层

实现代码：

editAddress.wxml：

 
 我的反馈
 保存


 选择地区


 收货人 ：
 


 联系方式 ：
 


 所在地区 ：
 gdgdfgdf
 


 详细地址 ：
 


 标签 ：
 家
 公司
 学校
 其他

editAddress.wxss：

page{
 width: 100%;height: 100%;position:relative
}
.leftdection{
 width: 20px;height: 20px;position:absolute;left: 0;
 margin-top: 5px;margin-left: 20px;
}
.righttag{
 position:absolute;
 right: 0;
 margin-right: 10px;
 color: red;
}
.item{
 width: 100%;height: 50px;background: #fff;
 display: flex;flex-direction: row;
 border-bottom: 1px solid #000
}
.inputclass{
 width: 220px;height: 25px;border: 0px solid #000;
 margin-top: 10px
}
.addresstag{
 width:25px;height:25px;border: 1px solid #000;padding-left:8px;
 padding-top: 10px;font-size: 10px;margin-top: 10px;margin-left: 10px
}
.dialogWrap{
 position: absolute;
 width: 100%;height: 94%;background: rgba(0, 0, 0, 0.1);
}
.selectaddress{
 position: absolute;bottom: 0;
 width: 100%;background: rgba(0, 0, 0, 0.3);
 height: 240px;
}
.rightdirectionclass{
 width: 25px;height: 25px;position: absolute;right: 20px;
 margin-top: 10px;
}

editAddress.js：

Page({
 
 data: {
  isShowSelectAddress:"none"
 },
 
 onLoad: function (options) {
  wx.setNavigationBarTitle({
   title: '编辑地址'
  });
 },
 
 onReady: function () {
 },
 
 onShow: function () {
 },
 
 onHide: function () {
 },
 
 onUnload: function () {
 },
 
 onPullDownRefresh: function () {
 },
 
 onReachBottom: function () {
 },
 
 onShareAppMessage: function () {
 },
 goBack:function(){
  wx.navigateBack({
  });
 },
 showselectregion:function(){
  this.setData({
   isShowSelectAddress:"block"
  })
 }
})

希望本文所述对大家微信小程序开发有所帮助。