uniapp动态修改元素节点样式详解

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了uniapp动态修改元素节点样式详解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

一,通过style属性绑定来修改

第一步:肯定是需要获取元素节点

在uniApp项目中没有windouw对象,所以通过document不能直接获取dom节点,vue的refs只对自定义组件有效,对uniapp中的标签不生效

查看uniapp官网有一个uni.createSelectorQuery() API;可以通过这个属性获取标签的样式,在通过动态绑定样式来修改;

htML:

<button tyPE="default" @click="handleFont">点击增大字体</button>
<view class="weibo_box" id='index0' :style="{fontSize:vHeight + 'px'}">

对应的js:

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


handleFont(){
	const that=this
	uni.createSelectorQuery().select('#index0').boundingClientRect(function (data) { 
	  console.LOG('元素信息0:',data)
		  that.vHeight +=10
	}).exec()
}

实现的效果:

在这里插入图片描述

二,利用ref来获取dom元素节点

代码:

<button type="default" @click="handleFont">点击增大字体</button>
<view class="weibo_box" id='index1' ref="mydom">
	第二个
</view>
data(){
	return {
		vHeight:22
	}
},
//部分代码不相关,省略

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

实现的效果:

在这里插入图片描述

总结

本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!

脚本宝典总结

以上是脚本宝典为你收集整理的uniapp动态修改元素节点样式详解全部内容,希望文章能够帮你解决uniapp动态修改元素节点样式详解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:uniapp