uniapp dynamic modification of element node style detailed explanation

1. Modify by binding the style attribute

The first step: you must get the element node

There is no windou object in the uniApp project, so the dom node cannot be directly obtained through the document. The refs of vue are only valid for custom components and not for tags in uniapp.

Check the uniapp official website for a uni.createSelectorQuery() API; you can use this property to get the style of the label and then modify it by dynamically binding the style;

html:

<button type="default" @click="handleFont">Click to increase font</button>
<view class="weibo_box" id='index0' :style="{fontSize:vHeight + 'px'}">

Corresponding js:

data(){
	return {
		vHeight:22
	}
},


handleFont(){
	const that=this
	uni.createSelectorQuery().select('#index0').boundingClientRect(function (data) { 
	  console.log('element information 0:', data)
		  that.vHeight +=10
	}).exec()
}

The effect achieved:

Second, use ref to get the DOM element node

Code:

<button type="default" @click="handleFont">Click to increase font</button>
<view class="weibo_box" id='index1' ref="mydom">
	The second one

data(){
	return {
		vHeight:22
	}
},
//Some codes are irrelevant, omit handleFont(){
	const that=this
	that.$refs.mydom.$el.style.fontSize=that.vHeight+=1+'px'
}

The effect achieved:

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!