微信小程序如何通过js操作html的css属性：
在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。
微信小程序中，不能通过这种方式进行操作。
如何在微信小程序中在wxml中操作wxss的属性。
实现思路：
通过利用数据绑定实现动态改变样式，
1、在wxxml标签内嵌css属性上绑定js的date值
2、通过js中绑定css属性的date值改变wxml标签内嵌的css属性
实现效果：点击所在地区，弹出选择地区的浮层
实现代码：
editAddress.wxml：
<view> <image bindtap='goBack' src=''></image> <text>我的反馈</text> <text bindtap='sendfeedback'>保存</text> </view> <view> <view >选择地区</view> </view> <view> <view>收货人 ：</view> <input placeholder="收货人" auto-focus/> </view> <view> <view>联系方式 ：</view> <input placeholder="联系方式" /> </view> <view bindtap='showselectregion'> <view>所在地区 ：</view> <text>gdgdfgdf</text> <image src='' ></image> </view> <view> <view>详细地址 ：</view> <input placeholder="详细地址" /> </view> <view> <view>标签 ：</view> <view >家</view> <view>公司</view> <view>学校</view> <view>其他</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" }, /** * 生命周期函数--监听页面加载 */ 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" }) } })