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

news2025/2/25 4:37:03

前言

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

在这里插入图片描述
非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在各端兼容性上的问题,要看清楚适用哪些端,避免浪费过多的时间再爬坑找问题解决问题上。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405629.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

npm安装报错(npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path C:\Program Files\nodejs\node_ca...)

使用npm安装时候报错了 根据网上经验解决方法: 1.删除.npmrc文件 该文件在:C:\Users{账户}\下的.npmrc文件, 一般这种类型的都是默认被隐藏,一定要选择将隐藏取消掉 删掉即可。 注意:当前方式确实是最有效的操作&…

猿创征文|如何在HbuilderX中运行Vue

第一步:安装Node.js 这里不加赘述,是傻瓜式安装 第二步:找到安装的Node在哪里 如果找不到可以打开cmd 输入 where node 第三步:打开HbuilderX 点击工具 选择设置 如图: 选择运行配置 ②③的位置是需要填写的位置 使用我…

vue项目首屏加载过慢解决方案

前言 因为我的一个vue项目首页打开加载了好久,所以决定优化一下。发现是打包体积太大了,页面才加载慢主要是第三方库。 优化着优化着就想要更好一点,于是逛博客搜索,参照了几个博主的解决方法整理出一下几点。​ 一、防止编译文…

如何在vscode里面快速运行html代码(包含如何在vscode里面编写html代码)

前言必读 读者手册(必读)_云边的快乐猫的博客-CSDN博客 前言: 1.如何在vscode编写html代码在我的另一篇文章当中有详细教程,这是超链接。 2.很多小伙伴编写了html代码后,在vscode里面右键找不到如何去运行代码&…

NProgress的用法

最近,应该很多小伙伴都找到前端开发的工作了吧。怎么样?工作中的代码是不是比机构学的代码复杂很多倍? 比如说 router里面的路由钩子函数是不是比学习的时候复杂很多倍?还有vuex模块是不是会见到许许多多的文件夹,每个…

vue长列表优化之虚拟列表实现

vue长列表优化之虚拟列表实现 应用场景:后台一次性发送上千条或更多数据给前台 场景模拟:用户发起一个请求,后台发送了10w条数据 使用虚拟列表之前:前台需要生成10w个dom节点用来渲染页面 使用虚拟列表之后:前台只需要生成少量dom节点(dom节点数量取决于前端视图需要展示的…

html中常见标签及其用法归纳大全

html零基础必看——htmlHTML常见标签大全 第二章:html常见标签前言一、常见标签(一)1、body标签2、div盒子标签3、p文本段落标签4、h1~h6 标题标签5、b标签和strong标签(文字加粗标签)6、span文字包裹标签7、br换行标签…

大二学生web期末大作业 在线电影网站 HTML+CSS+JS

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻 💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套…

ES6展开运算符“...”

● ES6新增了一个运算符“...”&#xff0c;叫做展开运算符 ● 作用是把数组或者对象内容展开 &#xff08;1&#xff09;展开数组&#xff1a; ○ ES5方法&#xff1a;concat&#xff08;&#xff09; <script>let a [1,2,3]let b [4,5,6]//ES5的方法&#xff1a;c…

【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图(超详细)

【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图&#xff08;超详细&#xff09; 1- 介绍 百度地图功能强大&#xff0c;本篇文章只是对百度地图JavaScript API 进行一个介绍~ 官方网址 百度地图开放平台LBS&#xff1a;LocationBusinessServer 基于定义位置的商…

JS 连接MQTT的方法(mqtt.js的使用方法)

本文章是介绍 mqtt.js 的使用方法 一、说明 本文章使用的版本是 4.1.x &#xff0c;没用最新版的原因是 4.2.x 以上版本会报错&#xff0c;具体报错可以看我的另一篇文章&#xff0c;点击查看。使用的 4.1.x 版本地址&#xff1a;https://cdn.bootcdn.net/ajax/libs/mqtt/4.1…

若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起

前言 因为是在vue源码的基础上进行修改&#xff0c;所以&#xff0c;就没有复制代码在文章上&#xff0c;采取的是截图对比源码和我修改的代码片段。要麻烦你们自己手敲了。 先来看看效果&#xff1a; 场景&#xff1a;在费用配置列表中&#xff0c;点击每一项的配置&#x…

vue如何设置元素的显示隐藏

方法&#xff1a;可以使用v-if&#xff0c;也可以使用v-show指令。 v-if 指令&#xff0c;通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素&#xff1b; v-show 指令&#xff0c;通过设置DOM元素的display样式属性来控制显隐。 区别&#xff1a; v-if 会直接删除…

手把手教你在 Vue3 中自定义指令

TienChin 项目前端是 Vue3&#xff0c;前端有这样的一个需求&#xff1a;有一些前端页面上的按钮要根据用户的权限来决定是否展示出来&#xff0c;如果用户具备相应的权限&#xff0c;那么就展示对应的按钮&#xff1b;如果用户不具备对应的权限&#xff0c;那么按钮就隐藏起来…

微信小程序:用户微信登录流程(附:流程图+源码)

目录 前言 一、微信小程序是什么&#xff1f; 二、业务流程 1、使用微信小程序登录的wx.login()方法 2、后端使用登录凭证换取session_key和openid 3、前端处理session_key、openid和token 尾言 前言 随着微信小程序大规模的铺开和宣传&#xff0c;在生活中随处可见微信小程序…

vue2常见面试题

文章目录1、vue 修改数据页面不重新渲染数组/对象的响应式 &#xff0c;vue 里面是怎么处理的&#xff1f;2、生命周期Vue 生命周期都有哪些&#xff1f;父子组件生命周期执行顺序3、watch 和 computed 的区别4、组件通信&#xff08;组件间传值&#xff09;5、$nextTick6、修饰…

【微信小程序】自定义组件(二)

&#x1f381;写在前面&#xff1a; 观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列文章又更新了呀。 上文我们讲解了微信小程序自定义组件的入门知识&#xff0c;那么今天牛牛就来讲讲自定义组件的进阶知识吧&#xff0c;赶紧拿起小本本做笔记…

vue中三种for循环(含案例分析)

这里写目录标题三种for循环1.普通的for循环2.for in 循环3.for of 循环总结三种for循环 vue中的for循环有三种 :1.普通的for循环 ,2.for in 循环 ,3.for of 循环 它们三个各自有各自的特点和作用&#xff0c;下面我会用一个小案例来帮助大家理解它们三个的区别 &#xff08;三…

【宜搭】低代码开发师高级认证实操题1难点指导

难度&#xff1a; 较难 知识点&#xff1a; 远程数据源 表单创建 表格组件使用 js增删改查功能代码编写 在本文中&#xff0c;我将根据题目的每一点要求&#xff0c;对于我在实操过程中遇到的难点进行比较详细的介绍&#xff0c;供大家参考&#xff0c;希望能够对大家有所帮助…

Bootstrap从入门到精通(全)

目录前言1. 下载安装2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统3. 常用样式4. 表单4.1 控件4.2 布局5. 插件5.1 导航框5.2 下拉菜单前言 在了解这篇文章的时候 需要提前知道这些知识点 可看我之前的文章 html从入门到精通&#xff08;全&#xff09;css属性从入…