uniapp動態(tài)修改元素節(jié)點樣式詳解
更新時間：2021年08月20日 10:40:43 作者：笑道三千
這篇文章主要介紹了uni-app動如何態(tài)修改元素節(jié)點樣式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一，通過style屬性綁定來修改
第一步：肯定是需要獲取元素節(jié)點
在uniApp項目中沒有windouw對象，所以通過document不能直接獲取dom節(jié)點，vue的refs只對自定義組件有效，對uniapp中的標(biāo)簽不生效。
查看uniapp官網(wǎng)有一個uni.createSelectorQuery() API；可以通過這個屬性獲取標(biāo)簽的樣式，在通過動態(tài)綁定樣式來修改；
html:
<button type="default" @click="handleFont">點擊增大字體</button>
<view class="weibo_box" id='index0' :style="{fontSize:vHeight + 'px'}">
對應(yīng)的js:
data(){
return {
vHeight:22
}
},
handleFont(){
const that=this
uni.createSelectorQuery().select('#index0').boundingClientRect(function (data) {
console.log('元素信息0：',data)
that.vHeight +=10
}).exec()
}
實現(xiàn)的效果：
二，利用ref來獲取dom元素節(jié)點
代碼：
<button type="default" @click="handleFont">點擊增大字體</button> <view class="weibo_box" id='index1' ref="mydom"> 第二個 </view>
data(){
return {
vHeight:22
}
},
//部分代碼不相關(guān)，省略
handleFont(){
const that=this
that.$refs.mydom.$el.style.fontSize=that.vHeight+=1+'px'
}
實現(xiàn)的效果：
總結(jié)
本篇文章就到這里了，希望能給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了微信小程序 css使用技巧總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細(xì)介紹了原生js+css實現(xiàn)tab切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
下面小編就為大家分享一篇js判斷傳入時間和當(dāng)前時間大小實例(超簡單)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了簡易的投票系統(tǒng)以及js刷票思路和方法，文章十分的詳盡，思路也很清晰，是篇非常不錯的文章，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了js改變文章字體大小的實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要給大家介紹了關(guān)于前端技巧之js-md5的簡單使用,js-md5是一種前端加密算法,用于在前端對密碼等敏感信息進(jìn)行加密,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)短信驗證碼倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
ECMAScript6函數(shù)剩余參數(shù)（Rest Parameters）
這篇文章主要介紹了ECMAScript6函數(shù)剩余參數(shù)（Rest Parameters）的相關(guān)資料,需要的朋友可以參考下2015-06-06
基于JavaScript實現(xiàn)根據(jù)手機(jī)定位獲取當(dāng)前具體位置（X省X市X縣X街道X號）
這篇文章主要介紹了基于JavaScript實現(xiàn)根據(jù)手機(jī)定位獲取當(dāng)前具體位置（X省X市X縣X街道X號）的相關(guān)資料,需要的朋友可以參考下2015-12-12
js對文字編碼有3個函數(shù)： escape,encodeURI,encodeURIComponent， 對應(yīng)的解碼函數(shù)：unescape,decodeURI,decodeURIComponent2011-12-12