本文實例講述了微信小程序?qū)崿F(xiàn)通過js操作wxml的wxss屬性。分享給大家供大家參考，具體如下：
創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)網(wǎng)站建設與網(wǎng)站營銷，提供成都網(wǎng)站設計、做網(wǎng)站、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、成都小程序開發(fā)、公眾號商城、等建站開發(fā)，創(chuàng)新互聯(lián)網(wǎng)站建設策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。
微信小程序如何通過js操作html的css屬性：
在web端、手機端、webApp中可以通過js獲取dom的方式設置dom屬性。
微信小程序中，不能通過這種方式進行操作。
如何在微信小程序中在wxml中操作wxss的屬性。
實現(xiàn)思路：
通過利用數(shù)據(jù)綁定實現(xiàn)動態(tài)改變樣式，
1、在wxxml標簽內(nèi)嵌css屬性上綁定js的date值
2、通過js中綁定css屬性的date值改變wxml標簽內(nèi)嵌的css屬性
實現(xiàn)效果：點擊所在地區(qū)，彈出選擇地區(qū)的浮層
實現(xiàn)代碼：
editAddress.wxml：
我的反饋 保存 選擇地區(qū) 收貨人 ： 聯(lián)系方式 ： 所在地區(qū) ： 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({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
isShowSelectAddress:"none"
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '編輯地址'
});
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
},
goBack:function(){
wx.navigateBack({
});
},
showselectregion:function(){
this.setData({
isShowSelectAddress:"block"
})
}
})
希望本文所述對大家微信小程序開發(fā)有所幫助。
