• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一,通过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'
}

实现的效果:

总结

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript知识:构造函数也是函数发布时间:2022-02-05
下一篇:
基于Vue技术实现递归组件的方法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap