快捷導(dǎo)航

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)文章

Bootstrap表單簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap表單的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
uni-app和原生小程序混合開(kāi)發(fā)的具體實(shí)現(xiàn)過(guò)程
最近項(xiàng)目中遇到了一些功能需要與原生進(jìn)行混合開(kāi)發(fā),所以下面這篇文章主要給大家介紹了關(guān)于uni-app和原生小程序混合開(kāi)發(fā)的具體實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下
2022-07-07
[js高手之路]從原型鏈開(kāi)始圖解繼承到組合繼承的產(chǎn)生詳解
下面小編就為大家?guī)?lái)一篇[js高手之路]從原型鏈開(kāi)始圖解繼承到組合繼承的產(chǎn)生詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
面向?qū)ο笤O(shè)計(jì)模式的核心法則
有本經(jīng)典的書(shū)叫《設(shè)計(jì)模式》，講了經(jīng)典的21種設(shè)計(jì)模式，建議大家都看看
2013-11-11
JavaScript實(shí)現(xiàn)創(chuàng)建自定義對(duì)象的常用方式總結(jié)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)創(chuàng)建自定義對(duì)象的常用方式,結(jié)合實(shí)例形式總結(jié)分析了JavaScript工廠模式、構(gòu)造函數(shù)模式、原型模式、組合模式等常用的自定義對(duì)象創(chuàng)建模式操作與使用技巧,需要的朋友可以參考下
2018-07-07
Bootstrap table簡(jiǎn)單使用總結(jié)
這篇文章主要為大家總結(jié)了Bootstrap table的簡(jiǎn)單使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
淺談webpack性能榨汁機(jī)(打包速度優(yōu)化)
這篇文章主要介紹了淺談webpack性能榨汁機(jī)(打包速度優(yōu)化)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
微信開(kāi)發(fā) 消息推送實(shí)現(xiàn)代碼
這篇文章主要介紹了微信開(kāi)發(fā) 消息推送實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
JavaScript模擬文件拖選框樣式v1.0的實(shí)例
下面小編就為大家?guī)?lái)一篇JavaScript模擬文件拖選框樣式v1.0的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
js代碼運(yùn)行報(bào)錯(cuò)Warning:To?load?an?ES?module,?set?"type&q
最近在學(xué)習(xí)ES6的過(guò)程中,和運(yùn)行javascript文件時(shí)進(jìn)行了報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于js代碼運(yùn)行報(bào)錯(cuò)Warning:To?load?an?ES?module,?set?"type":"module"in?the?package.json?or?use?the?.mjs的相關(guān)資料,需要的朋友可以參考下
2023-04-04