Detaillierte Erläuterung der dynamischen Änderung des Elementknotenstils in Uniapp

1. Ändern Sie durch Binden des Stilattributs

Der erste Schritt: Sie müssen den Elementknoten abrufen

Da im UniApp-Projekt kein Windou-Objekt vorhanden ist, kann der Dom-Knoten nicht direkt über das Dokument abgerufen werden. Die Referenzen von Vue sind nur für benutzerdefinierte Komponenten gültig und nicht für Tags in UniApp.

Suchen Sie auf der offiziellen Uniapp-Website nach einer uni.createSelectorQuery()-API. Mit dieser Eigenschaft können Sie den Stil des Etiketts abrufen und ihn dann durch dynamisches Binden des Stils ändern.

html:

<button type="default" @click="handleFont">Klicken, um Schrift zu vergrößern</button>
<view class="weibo_box" id='index0' :style="{fontSize:vHeight + 'px'}">

Entsprechendes js:

Daten(){
	zurückkehren {
		vHöhe:22
	}
},


handleFont(){
	const das=dies
	uni.createSelectorQuery().select('#index0').boundingClientRect(Funktion (Daten) { 
	  console.log('Elementinformationen 0:', Daten)
		  das.vHeight +=10
	}).exec()
}

Der erzielte Effekt:

Zweitens verwenden Sie ref, um den DOM-Elementknoten abzurufen

Code:

<button type="default" @click="handleFont">Klicken, um Schrift zu vergrößern</button>
<view class="weibo_box" id='index1' ref="mydom">
	Der Zweite

Daten(){
	zurückkehren {
		vHöhe:22
	}
},
//Einige Codes sind irrelevant, lassen Sie handleFont() weg. {
	const das=dies
	das.$refs.mydom.$el.style.fontSize=das.vHeight+=1+'px'
}

Der erzielte Effekt:

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!