uniapp動態(tài)修改元素節(jié)點樣式詳解

更新時間：2021年08月20日 10:40:43 作者：笑道三千

這篇文章主要介紹了uni-app動如何態(tài)修改元素節(jié)點樣式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一，通過style屬性綁定來修改

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

在uniApp項目中沒有windouw對象，所以通過document不能直接獲取dom節(jié)點，vue的refs只對自定義組件有效，對uniapp中的標簽不生效。

查看uniapp官網(wǎng)有一個uni.createSelectorQuery() API；可以通過這個屬性獲取標簽的樣式，在通過動態(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)文章

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