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

目录
  • 一，通过style属性绑定来修改
    • html:
    • 对应的js:
    • 实现的效果：
  • 二，利用ref来获取dom元素节点
    • 代码：
    • 实现的效果：
  • 总结

一，通过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)

相关推荐

  • uniapp项目优化方式及建议

    目录 1.复杂页面数据区域封装成组件 2.避免使用大图 3.小程序.APP分包处理pages过多 4.图片懒加载 5.禁止滥用本地存储 6.可在外部定义变量 7.分批加载数据优化页面渲染 8.避免视图层和逻辑层频繁进行通讯 9.CSS优化 10.善用节流和防抖 11.优化页面切换动画 12.优化背景色闪白 13.优化启动速度 14.优化包体积 15.禁止滥用外部js插件 1.复杂页面数据区域封装成组件 场景: 例如项目里包含类似论坛页面:点击一个点赞图标,赞数要立即+1,会引发页面级所有的数据从

  • 分析uniapp如何动态获取接口域名

    背景 接口域名没有写死,而是动态获取.具体实现就是 通过读取一个静态json文件,来设置真实的接口域名.好处是原域名有可能被封,这样可以直接后台操作修改该配置文件即可:不然的话,h5 项目可能还好说,app 的话必须重新发版. 代码 // httpService.js 对 uni.request 的封装. 在数据请求入口处,统一先进行 域名获取,即 执行 config.requestRemoteIp 方法 import config from '@/config' import Vue from

  • uniapp封装小程序雷达图组件的完整代码

    uniapp封装小程序雷达图组件的完整代码

    效果图: 实现代码如下 view <canvas id="radar-canvas" class="radar-canvas" type="2d"></canvas> style .radar-canvas width 550rpx height 550rpx margin 0 auto script <script> import { toRpx } from "@/utils/common&quo

  • uniapp在微信小程序中使用ECharts的方法

    uniapp在微信小程序中使用ECharts的方法

    今天使用uniapp集成Echarts,实现地图图表的展示 可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进 网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv

  • 使用vscode 开发uniapp的方法

    使用vscode 开发uniapp的方法

    因为之前一直都是使用vscode开发前端项目,现在有一些小程序或者h5项目采用uniapp开发,在体验了一段时间hbuiler之后,还是觉得vscode香,以下分享我使用vscode开发的一些配置.其中包括uniapp组件语法提示,uniapp代码提示,代码自动格式化. 参考文档: https://ask.dcloud.net.cn/article/id-36286__page-2 1. 安装vetur 首先我们需要安装vscode基本的vue插件vetur,在vscode扩展程序中即可安装 2

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

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

    目录 一,通过style属性绑定来修改 html: 对应的js: 实现的效果: 二,利用ref来获取dom元素节点 代码: 实现的效果: 总结 一,通过style属性绑定来修改 第一步:肯定是需要获取元素节点 在uniApp项目中没有windouw对象,所以通过document不能直接获取dom节点,vue的refs只对自定义组件有效,对uniapp中的标签不生效. 查看uniapp官网有一个uni.createSelectorQuery() API:可以通过这个属性获取标签的样式,在通过动态绑

  • 关于React动态修改元素样式的三种方式

    关于React动态修改元素样式的三种方式

    目录 React动态修改元素样式 1.借助ref动态修改样式 2.通过动态控制状态的变化修改元素的样式(两种方式) 3.通过在DOM中使用JS代码(三元运算符) React样式冲突问题 css-样式私有化 cssModules-维持类名 css modules-最佳实践 React动态修改元素样式 React动态修改元素样式常用的方式有两种:借助ref和通过动态控制状态的变化修改元素的样式 1.借助ref动态修改样式 在需要修改样式的元素上添加ref <div className='scroll

  • jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div> 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 <div id="testdiv"> <ul> <li name="apple">apple</li> <li name="

  • 微前端之 js隔离 样式隔离 元素隔离问题详解

    微前端之 js隔离 样式隔离 元素隔离问题详解

    目录 WebComponent 介绍 js隔离 问题 解决 方法一用 Proxy 代理 方法二 用快照 样式隔离 问题 方法一 样式增加不同前缀 方法二 ShadawDom 元素隔离 WebComponent 介绍 微前端框架中,js隔离.样式隔离.元素隔离是必须解决的三个问题,下面我们就来分别说说这三个问题是什么?怎么解决? 涉及的核心点是 Proxy,WebComponent,shadowDOM WebComponent 不在这三个问题中,但是我们做个简单介绍 浏览器默认的标签有 div,a

  • Vue.js中对css的操作（修改）具体方式详解

    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas

  • Vue指令实现大屏元素分辨率适配详解

    目录 前言 1. 常见的适配方案 2. CSS3 缩放方案 3. 封装一个缩放指令 4. 后记 前言 随着前端技术的不断发展.数据中心(中台)之类的概念的不断升级.物联网设备的更新和普及,越来越多的业主(项目)喜欢在系统中添加一个或者多个可视化大屏,用来集中的展现数据变化.位置变化等等,老板们也更喜欢称之为“态势”. 当然,作为程序员一般都不关心“老板们”的想法,只要完成项目即可.但是经常会有这样的问题:我有一个大屏的模板,但是用户的浏览器分辨率不够,或者有的有书签栏有的没有书签栏,更或者是有的

  • jQuery操作属性和样式详解

    jQuery操作属性和样式详解

    • 区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id,src,alt等叫做这个元素的"属性".我们将其称为"元素属性".但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象",

  • 基于 D3.js 绘制动态进度条的实例详解

    D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于

  • mybatis动态sql实现逻辑代码详解

    mybatis动态sql实现逻辑代码详解

    目录 1.xml文件读取 2.xml 文件解析 mybatis通过将sql配置xml文件中,通过解析xml动态标签来实现动态sql 如下样例 xml文件 <?xml version = "1.0" ?> <!DOCTYPE script SYSTEM "script-1.0.dtd"> <script namespace="user"> <common id="commonOrder"

  • C语言静态与动态通讯录的实现流程详解

    目录 静态通讯录 contact.h contact.c test.c 动态通讯录 contact.h contact.c qsort.c test.c 本次通讯录的代码已经放到我的Gitee仓库中,感兴趣的小伙伴可以去看看 Gitee 静态通讯录 在我们学习完C语言的结构体.指针以及动态内存管理之后,我们就可以实现一些有意思的小项目了,通过这些小项目可以加深我们对于相关知识的理解. 静态通讯录主要要求有 静态大小,可以记录10个人的信息(大小自己定) 记录的信息如下:名字.性别.年龄.电话.住

随机推荐