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' } 

实现的效果：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/haskellbc/10934.html