欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp動(dòng)態(tài)修改元素節(jié)點(diǎn)樣式詳解

 更新時(shí)間：2021年08月20日 10:40:43   作者：笑道三千  
這篇文章主要介紹了uni-app動(dòng)如何態(tài)修改元素節(jié)點(diǎn)樣式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一，通過(guò)style屬性綁定來(lái)修改

第一步：肯定是需要獲取元素節(jié)點(diǎn)

在uniApp項(xiàng)目中沒(méi)有windouw對(duì)象，所以通過(guò)document不能直接獲取dom節(jié)點(diǎn)，vue的refs只對(duì)自定義組件有效，對(duì)uniapp中的標(biāo)簽不生效。

查看uniapp官網(wǎng)有一個(gè)uni.createSelectorQuery() API；可以通過(guò)這個(gè)屬性獲取標(biāo)簽的樣式，在通過(guò)動(dòng)態(tài)綁定樣式來(lái)修改；

html:

<button type="default" @click="handleFont">點(diǎn)擊增大字體</button>
<view class="weibo_box" id='index0' :style="{fontSize:vHeight + 'px'}">

對(duì)應(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()
}

實(shí)現(xiàn)的效果：

在這里插入圖片描述

二，利用ref來(lái)獲取dom元素節(jié)點(diǎn)

代碼：

<button type="default" @click="handleFont">點(diǎn)擊增大字體</button>
<view class="weibo_box" id='index1' ref="mydom">
	第二個(gè)
</view>

data(){
	return {
		vHeight:22
	}
},
//部分代碼不相關(guān)，省略

handleFont(){
	const that=this
	that.$refs.mydom.$el.style.fontSize=that.vHeight+=1+'px'
}

實(shí)現(xiàn)的效果：

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評(píng)論