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=thisuni.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=thisthat.$refs.mydom.$el.style.fontSize=that.vHeight+=1+'px'
}

实现的效果：

uniapp动态修改元素节点样式相关推荐

uniapp 动态修改导航栏之前使用this.$mp.page page提示未定义
uniapp 动态修改导航栏 // 使用条件编译防止H5报错// #ifdef APP-PLUSlet pages = getCurrentPages();let page = pages[page ...
uniapp动态修改样式_uniapp样式动态绑定
场景一:用户点击按钮后动态切换按钮选中样式(如图) 已上线未开始 //选择状态 selectState(e){ this.whichSelected=e.currentTarget.dataset. ...
【DOM】DOM操作之如何修改元素的样式_03
目录一. 修改: 3种 1. 元素内容: 3种 2. 元素属性: 3种 3. 元素样式: (1). 修改内联样式 (2). 修改样式表中的样式 (3). 示例: 修改元素的内联样式和样式表中的样式 ...
uni-app 动态修改导航名称
一级页面 methods: {//在点击list跳转的时候携带id传参到listSecond页面toLs(index,name) {**this.getIndex = index**uni.navig ...
uniapp动态修改样式_掌握Photoshop图层样式技术
凹凸贴图效果 "等等,什么?" 您会惊叹:""图层样式"菜单中没有凹凸贴图效果!" 的确如此,但是通过将"图案覆盖"和& ...
uni-app动态修改导航条的标题
由于这个微信小程序表单页面是用于创建和编辑的,所以导航条的标题不能是一样的,但是在路由配置里面只能设置一个.所以需要在页面中进行修改,在这里用到了uni-app给我们的uni.setNavigatio ...
uniapp 动态获取元素高度
vue页面获取元素, app端推荐(这个也兼容H5) //设置mescroll的高度setTimeout(()=>{const query = uni.createSelectorQuery() ...
js 修改动态修改class css样式
//添加类名变量let danmakuWrapper = `.danmaku-wrapper{color:${this.danmakuData.color};font-size:${this.danm ...
ext tree相关知识动态修改节点小图标
ext tree相关知识 Java代码 ext tree 动态修改各个节点名称icon小图标 [java] view plaincopy ext tree 动态修改各个节点名称icon小图标 Jav ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

uniapp动态修改元素节点样式

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

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

uniapp动态修改元素节点样式相关推荐

最新文章

热门文章