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

<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>

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;}

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"  }) }})