位置: IT常识 - 正文

uniapp中获取dom元素的方法,更改dom元素颜色(遇坑记录)(uniapp dom操作)

编辑:rootadmin
uniapp中获取dom元素的方法,更改dom元素颜色(遇坑记录) 前言

推荐整理分享uniapp中获取dom元素的方法,更改dom元素颜色(遇坑记录)(uniapp dom操作),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp获取数据,uniapp获取当前页面,uniapp dom操作,uniapp获取当前页面,uniapp获取元素高度,uniapp获取当前页面,uni-app获取dom元素,uniapp获取oaid,内容如对您有帮助,希望把文章链接给更多的朋友!

最近写uniapp,遇到一个需要获取到页面中dom元素,我第一反应是使用this.$ refs进行获取,于是我开心的使用this.$refs写了很多代码,使用h5调试的过程中没有发现任何问题,但后来真机调试的时候发现在app端无效,于是我查看文档发现了:

uniapp中获取dom元素的方法,更改dom元素颜色(遇坑记录)(uniapp dom操作)

非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view、text)

使用uni.createSelectorQuery()

SelectorQuery是查询节点信息的对象 可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。 比如使用selectorQuery.in(component)

const query = uni.createSelectorQuery().in(this);query.select('#id').boundingClientRect(data => { console.log("得到布局位置信息" + JSON.stringify(data)); console.log("节点离页面顶部的距离为" + data.top);}).exec();

这样就能获取该dom结点的信息,比如: 除此之外还可以查看关于SelectorQuery的更多用法,详情见官网文档 SelectorQuery

直接动态绑定style来修改样式

例如: 然后在boxStyleDefault1写对应的样式,并且可以在js逻辑中对样式进行修改,这种方法在h5,app和小程序中均适用,不用考虑兼容性的问题。

看来在开发中多查阅官方文档能够少走很多弯路,特别是uniapp在各端兼容性上的问题,要看清楚适用哪些端,避免浪费过多的时间再爬坑找问题解决问题上。

本文链接地址:https://www.jiuchutong.com/zhishi/297765.html 转载请保留说明!

上一篇:分享项目 - Vue3 + TS + element-ui-plus 项目 -- Table表格表单(分享项目成果)

下一篇:8年前端与众不同的Vue实战系列,助你成为前端顶级开发者(前端2020年趋势)

  • 如何去做好用户运营(如何做好客户服务)

    如何去做好用户运营(如何做好客户服务)

  • 苹果平板ipad怎么投屏到电视(苹果平板ipad怎么录屏)

    苹果平板ipad怎么投屏到电视(苹果平板ipad怎么录屏)

  • 快手不满18怎么直播(快手未满十八岁可以提现吗)

    快手不满18怎么直播(快手未满十八岁可以提现吗)

  • 电脑图片另存为快捷键(电脑图片另存为jpg格式怎么弄)

    电脑图片另存为快捷键(电脑图片另存为jpg格式怎么弄)

  • 华为nova7视频通话美颜怎么打开

    华为nova7视频通话美颜怎么打开

  • 红米k30pro费电怎么解决(红米k30pro耗电变快)

    红米k30pro费电怎么解决(红米k30pro耗电变快)

  • 显卡工作原理(显卡工作原理简述)

    显卡工作原理(显卡工作原理简述)

  • 电脑微信声音怎么关闭(电脑微信声音怎么设置大小)

    电脑微信声音怎么关闭(电脑微信声音怎么设置大小)

  • 12306电子车票可以取票吗(12306电子客票可以取票吗)

    12306电子车票可以取票吗(12306电子客票可以取票吗)

  • matlab怎么调用函数(matlab怎么样调用函数)

    matlab怎么调用函数(matlab怎么样调用函数)

  • iphone6s不充电就卡(iphone6不充电就关机)

    iphone6s不充电就卡(iphone6不充电就关机)

  • 手机频繁无故锁屏(手机老是自动锁)

    手机频繁无故锁屏(手机老是自动锁)

  • 华为980和990区别(华为980和990e)

    华为980和990区别(华为980和990e)

  • 台式电脑有没有麦克风(台式电脑有没有wifi功能)

    台式电脑有没有麦克风(台式电脑有没有wifi功能)

  • 华为mate9pro有nfc功能吗(华为mate9pro带nfc)

    华为mate9pro有nfc功能吗(华为mate9pro带nfc)

  • 拼多多怎么强制取消拼单(拼多多怎么强制退款申请)

    拼多多怎么强制取消拼单(拼多多怎么强制退款申请)

  • 如何不让群里的人看我的朋友圈(如何不让群里的人改群名)

    如何不让群里的人看我的朋友圈(如何不让群里的人改群名)

  • 冷藏室显示f1要维修吗(冷藏室显示f1是怎么了吗?)

    冷藏室显示f1要维修吗(冷藏室显示f1是怎么了吗?)

  • 为什么要开发app分销系统(为什么要开发右脑)

    为什么要开发app分销系统(为什么要开发右脑)

  • 奇趣统计是腾讯官方吗(奇趣统计app)

    奇趣统计是腾讯官方吗(奇趣统计app)

  • 小米管家叫啥(小米管家在线服务)

    小米管家叫啥(小米管家在线服务)

  • 苹果x重量为多少g(iphonex重量)

    苹果x重量为多少g(iphonex重量)

  • 如何把qq名片头像居中(如何把qq名片头像换掉)

    如何把qq名片头像居中(如何把qq名片头像换掉)

  • apple教育优惠怎么买(apple教育优惠怎么用)

    apple教育优惠怎么买(apple教育优惠怎么用)

  • 华为手机老是跳出来新标记已收集(华为手机老是跳广告出来怎么办)

    华为手机老是跳出来新标记已收集(华为手机老是跳广告出来怎么办)

  • 7p后置摄像头黑屏闪光灯也打不开(7p后置摄像头黑屏手电筒不亮)

    7p后置摄像头黑屏闪光灯也打不开(7p后置摄像头黑屏手电筒不亮)

  • FastAdmin插件对接聚合登录(fastadmin 插件开发)

    FastAdmin插件对接聚合登录(fastadmin 插件开发)

  • Stable Diffusion 关键词tag语法教程

    Stable Diffusion 关键词tag语法教程

  • 支付的画图费没有发票要如何处理
  • 文化建设费退税会计分录怎么做
  • 算税负是用含税的吗
  • 专利资本化条件
  • 行政处罚属于什么费用
  • 退回投资款转为借款怎么记账
  • 税费的计提和缴纳
  • 同一投资主体内部所属企业之间土地,房屋权属的划转
  • 企业所得税弥补亏损年限
  • 私营公司会计资取公司资金
  • 应付职工薪酬的计税基础
  • 银行承兑汇票怎么取钱
  • 政府扶持资金科目怎么做?
  • 一般纳税人采购收到普通发票
  • 运输费计入采购成本的分录
  • 小规模纳税人附加税优惠政策2023
  • 金税盘问题
  • 变更办税人需要原办税人去吗
  • 票据转让后本公司还有责任吗
  • 增值税做账做错怎么处理
  • 防暑降温列支什么费用
  • 收到分包公司工程发票收入怎么做账
  • efi bios u盘启动
  • 会计主要做些啥
  • quickres.exe - quickres是什么进程 作用是什么
  • linux中free命令详解
  • 销售折扣的会计分录处理
  • CI(Codeigniter)的Setting增强配置类实例
  • 仓储服务和不动产租赁
  • 跨域的几种方法
  • phpopendir
  • sql实现mysql的分页功能
  • 时间序列转换
  • 给大家分享几个网站
  • 得物的成本结构是什么
  • vue+element-ui项目
  • json有几种基本结构
  • 工会经费怎么上缴
  • 公司捐款怎样抵扣
  • 红字发票可以跨越开吗
  • 手机上动态调试apk
  • php实现站内消息推送
  • vue实现注册
  • python复制文件的代码
  • 债权人豁免债务的账务处理会计分录
  • 金税三期业务操作手册
  • 拍卖土地支付的法律依据
  • 免税申请需要什么材料
  • 长期待摊费用的最新账务处理
  • 小规模减免附加税的会计处理
  • 全额工资和实发工资
  • 居间活动费用由谁负担
  • 公司章程约定的出资时间
  • 企业信息页
  • 企业低值易耗品的摊销方法有( )
  • Mysql 5.7.9 shutdown 语法实例详解
  • 群发网址
  • win7打开浏览器很慢
  • linux 添加ipv6路由
  • bios是什么怎么设置
  • 进程crash是什么意思
  • win10通知中心
  • win10内置应用大全
  • linux创建vg
  • win8系统没有声音怎么办
  • unity shader editor
  • nodejs bull
  • bat批处理删除文件
  • unity2d的小游戏
  • 批处理系统定义
  • 从零基础开始
  • js初级教程
  • jquery库有哪些
  • JavaScript的removeChild()函数用法详解
  • 票据代码和票据号码是什么意思
  • 什么是双创服务平台
  • 电子税务局如何解绑办税人员
  • pppoe账号密码改了连不上网
  • 朝阳区第六税务所
  • 留底税额怎么写分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设