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

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

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

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

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

实现思路:

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

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

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

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

\"\"

实现代码:

editAddress.w :

<view class=\'top\'>
 <image bindtap=\'goBack\' class=\'leftdection\' src=\'../../../../images/leftdection02.png\'></image>
 <text>我的反馈</text>
 <text class=\'righttag\' bindtap=\'sendfeedback\'>保存</text>
</view>
<view class=\'dialogWrap\' style=\'display:{{isShowSelectAddress}}\'>
 <view class=\'selectaddress\' >选择地区</view>
</view>
<view class=\'item\'>
 <view style=\'color:#000;margin-top:10px;margin-left:10px\'>收货人 :</view>
 <input class=\'inputclass\' placeholder=\"收货人\" auto-focus/>
</view>
<view class=\'item\'>
 <view style=\'color:#000;margin-top:10px;margin-left:10px\'>联系方式 :</view>
 <input class=\'inputclass\' placeholder=\"联系方式\" />
</view>
<view class=\'item\' bindtap=\'showselectregion\'>
 <view style=\'color:#000;margin-top:10px;margin-left:10px\'>所在地区 :</view>
 <text style=\'margin-top:10px\'>gdgdfgdf</text>
 <image class=\'rightdirectionclass\' src=\'../../../../images/leftdirection.png\' ></image>
</view>
<view class=\'item\'>
 <view style=\'color:#000;margin-top:10px;margin-left:10px\'>详细地址 :</view>
 <input class=\'inputclass\' placeholder=\"详细地址\" />
</view>
<view class=\'item\'>
 <view style=\'color:#000;margin-top:10px;margin-left:10px\'>标签 :</view>
 <view class=\'addresstag\' >家</view>
 <view class=\'addresstag\'>公司</view>
 <view class=\'addresstag\'>学校</view>
 <view class=\'addresstag\'>其他</view>
</view>

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\"
 },
 /**
  * 生命周期函数--监听页面加载
  */
  : function (options) {
  wx.setNavigationBar ({
    : \'编辑地址\'
  });
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函数--监听页面卸载
  */
  : function () {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 },
 goBack:function(){
  wx.navigateBack({
  });
 },
 showselectregion:function(){
  this.setData({
   isShowSelectAddress:\"block\"
  })
 }
})

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

收藏 打印