当前位置: 首页 > news >正文

react 通过ref 获取对应 dom 的位置信息

需求:

  • 在点击某个dom 元素的时候滚动条要同步滚动

进程:

  • 获取ref 打印,打印出来是一个dom 元素,看不到有什么方法
  • 查找 dom 属性信息
  • 找到了两个参数,offsetLeft:返回元素的水平偏移位置。 offsetTop:返回元素的垂直偏移位置。
  • 这两个参数都是基于父节点的,可以直接使用
this.cellMainBox.current.scrollTop = activeCell.offsetTop - 150
this.cellMainBox.current.scrollLeft = activeCell.offsetLeft - 150

拓展:

属性 / 方法描述
accessKey设置或返回元素的 accesskey 属性。
addEventListener()将事件处理程序附加到元素。
appendChild()向元素添加(附加)新的子节点。
attributes返回元素属性的 NamedNodeMap。
blur()从元素中移除焦点。
childElementCount返回元素的子元素个数。
childNodes返回元素子节点的 NodeList。
children返回元素的子元素的 HTMLCollection。
classList返回元素的类名。
className设置或返回元素的 class 属性值。
click()模拟鼠标单击元素。
clientHeight返回元素的高度,包括内边距。
clientLeft返回元素左边框的宽度。
clientTop返回元素上边框的宽度。
clientWidth返回元素的宽度,包括内边距。
cloneNode()克隆元素。
closest()在 DOM 树中搜索与 CSS 选择器匹配的最接近的元素。
compareDocumentPosition()比较两个元素的文档位置。
contains()如果节点是节点的后代,则返回 true。
contentEditable设置或返回元素的内容是否可编辑。
dir设置或返回元素的 dir 属性的值。
firstChild返回元素的第一个子节点。
firstElementChild返回元素的第一个子元素。
focus()让元素获得焦点。
getAttribute()返回元素属性的值。
getAttributeNode()返回属性节点。
getBoundingClientRect()返回元素的大小及其相对于视口的位置。
getElementsByClassName()返回拥有给定类名的子元素的集合。
getElementsByTagName()返回拥有给定标签名称的子元素的集合。
hasAttribute()如果元素拥有给定属性,则返回 true。
hasAttributes()如果元素拥有任何属性,则返回 true。
hasChildNodes()如果元素有任何子节点,则返回 true。
element.id设置或返回元素 id 属性的值。
innerHTML设置或返回元素的内容。
innerText设置或返回节点及其后代的文本内容。
insertAdjacentElement()在相对于元素的位置插入新的 HTML 元素。
insertAdjacentHTML()在相对于元素的位置插入 HTML 格式的文本。
insertAdjacentText()在相对于元素的位置插入文本。
insertBefore()在现有子节点之前插入新子节点。
isContentEditable如果元素的内容是可编辑的,则返回 true。
isDefaultNamespace()如果给定的 namespaceURI 是默认值,则返回 true。
isEqualNode()检查两个元素是否相等。
isSameNode()检查两个元素是否是同一个节点。
isSupported()已弃用。
lang设置或返回元素的 lang 属性值。
lastChild返回元素的最后一个子节点。
lastElementChild返回元素的最后一个子元素。
matches()如果元素与给定的 CSS 选择器匹配,则返回 true。
namespaceURI返回元素的命名空间 URI。
nextSibling返回位于相同节点树层级的下一个节点。
nextElementSibling返回位于相同节点树层级的下一个元素。
nodeName返回节点的名称。
nodeType返回节点的节点类型。
nodeValue设置或返回节点的值。
normalize()合并元素中相邻的文本节点,并移除空的文本节点。
offsetHeight返回元素的高度,包括内边距、边框和滚动条。
offsetWidth返回元素的宽度,包括内边距、边框和滚动条。
offsetLeft返回元素的水平偏移位置。
offsetParent返回元素的偏移容器。
offsetTop返回元素的垂直偏移位置。
outerHTML设置或返回元素的内容(包括开始标签和结束标签)。
outerText设置或返回节点及其后代的外部文本内容。
ownerDocument返回元素的根元素(文档对象)。
parentNode返回元素的父节点。
parentElement返回元素的父元素节点。
previousSibling返回位于相同节点树层级的上一个节点。
previousElementSibling返回位于相同节点树层级的上一个元素。
querySelector()返回与 CSS 选择器匹配的第一个子元素。
querySelectorAll()返回与 CSS 选择器匹配的所有子元素。
remove()从 DOM 中移除元素。
removeAttribute()从元素中移除属性。
removeAttributeNode()移除属性节点,并返回移除的节点。
removeChild()从元素中移除子节点。
removeEventListener()删除已使用 addEventListener() 方法附加的事件处理程序。
replaceChild()替换元素中的子节点。
scrollHeight返回元素的整体高度,包括内边距。
scrollIntoView()将元素滚动到浏览器窗口的可见区域。
scrollLeft设置或返回元素内容水平滚动的像素数。
scrollTop设置或返回元素内容垂直滚动的像素数。
scrollWidth返回元素的整体宽度,包括内边距。
setAttribute()设置或更改属性的值。
setAttributeNode()设置或更改属性节点。
style设置或返回元素 style 属性的值。
tabIndex设置或返回元素的 tabindex 属性的值。
tagName返回元素的标签名。
textContent设置或返回节点及其后代的文本内容。
title设置或返回元素的 title 属性值。
toString()将元素转换为字符串。

相关文章:

react 通过ref 获取对应 dom 的位置信息

需求: 在点击某个dom 元素的时候滚动条要同步滚动 进程: 获取ref 打印,打印出来是一个dom 元素,看不到有什么方法查找 dom 属性信息找到了两个参数,offsetLeft:返回元素的水平偏移位置。 offsetTop&…...

SpringSecurity学习 - 认证和授权

一般来说中大型的项目都是使用SpringSecurity 来做安全框架。小项目有Shiro的比较多,因为相比与SpringSecurity,Shiro的上手更加的简单。 一般Web应用的需要进行认证和授权。 认证:验证当前访问系统的是不是本系统的用户,并且要…...

JDK jps命令复习

之前写过jdk命令工具的博文,下面复习jps命令; jps 是 Java Process Status Tool 的简称,它的作用是为了列出所有正在运行中的 Java 虚拟机进程和相关信息; jps 命令参数 -q 只输出进程 ID,省略主类的名称 -m 输出虚拟机进程启动时传递…...

Android 13.0 屏蔽Launcher3桌面app图标的长按功能

1.概述 在13.0的产品定制化开发中,系统默认的Launcher3在workspace 第二屏通常都会显示app列表 点击进入app 列表页,长按app的icon图标会弹出 应用信息 弹窗 等信息,而产品的开发需要,不需要弹出这些信息,所以要求去掉app的icon图标的长按功能 2.屏蔽Launcher3桌面app图…...

软考和PMP哪个含金量更高?

软考中,能和pmp一起来比较的是软考高项,软考高级信息系统项目管理师,和PMP的共同点,基本来说都是项目管理类的证书。本质也都是适用于项目经理岗位的证书,软考高项中大部分考试内容是PMPIT技术两部分,其中项…...

第一章:最新版零基础学习 PYTHON 教程(第三节 - 下载并安装Python最新版本)

在这里,我们将讨论如何获得与在 Windows/Linux/mac OS 上安装 Python 相关的所有问题的答案。Python由Guido van Rossum于20世纪90年代初开发,最新版本为3.11,我们可以简称为Python3。 如何下载并安装Python? 要了解如何安装 P…...

Spring 中三种 BeanName 生成器!

无论我们是通过 XML 文件,还是 Java 代码,亦或是包扫描的方式去注册 Bean,都可以不设置 BeanName,而 Spring 均会为之提供默认的 beanName,今天我们就来看看 Spring 中三种处理不同情况的 beanName 生成器。 1. BeanN…...

Go基础-文件、字符

文件创建 导入“os”包,创建文件,读写文件的函数都在改包。 指定创建的文件存放路径以及文件名。 执行Create( )函数,进行文件创建。 关闭文件。 package mainimport ("fmt""os" )func main() {//创建文件,…...

启动YOLO进行图片物体识别

查看官方文档YOLO: Real-Time Object Detection 这些是一些模型的对比,显示了YOLO的优势,继续往下面看 CoCoData set 是一个数据库,用来训练模型,这里面有丰富的物体检测,分割数据集,图像经过了精确的segm…...

BMS电池管理系统的蓝牙芯片 国产高性能 低功耗蓝牙Soc芯片PHY6222

电池管理系统是对电池进行监控与控制的系统,将采集的电池信息实时反馈给用户,同时根据采集的信息调节参数,充分发挥电池的性能。但是,前技术中,在管理多个电池时,需要人员现场调试与设置,导致其…...

肖sir__mysql之三表__008

mysql之三表 create table student( stu_no int, stu_name varchar(10), sex char(1), age int(3), edit varchar(20) ) DEFAULT charsetutf8; insert into student values (1,‘wang’,‘男’,21,‘hello’), (2,‘小明’,‘女’,22,‘haha2’), (3,‘hu’,‘女’,23,‘haha3…...

【Linux】常用工具(上)

Linux 常用工具 一、Linux 软件包管理器 yum1. 软件包2. 查看软件包3. 安装/卸载软件4. yum 其他指令的功能 二、Linux 编辑器 - vim 使用1. vim 的基本概念2. vim 的基本操作(1)光标移动(命令模式)(2)光标…...

【kafka】可视化工具KAFKA EAGLE安装分享

目录 准备: 开始: 1.解压 2.环境变量配置 3.生效环境变量配置文件 3.修改配置文件 1.修改zookeeper集群信息 2.修改mysql配置信息 4.启动 5.异常排查 6.页面 创作不易,你的动力是我创作的动力,如果有帮助请关注我&…...

【深度装机】深度U盘装机后黑屏闪光标

装x64的系统 装机版的gho文件太多预装软件了。几年前买的这种无风扇的机器,之前装的ubuntu:装机U盘启动后,先删掉的所有的ubuntu分区。使用了10几年的AOC又肩负使命: 感觉发热还是挺大的。 有人说因为secure boot 打开secure boo…...

【性能测试】JMeter:集合点,同步定时器的应用实例!

一、集合点的定义 在性能测试过程中,为了真实模拟多个用户同时进行操作以度量服务器的处理能力,可以考虑同步虚拟用户以便恰好在同一时刻执行操作或发送请求。 通过插入集合点可以较真实模拟多个用户并发操作。 (注意:虽然通过加入集合点可…...

21天学会C++:Day11----运算符重载

CSDN的uu们&#xff0c;大家好。这里是C入门的第十一讲。 座右铭&#xff1a;前路坎坷&#xff0c;披荆斩棘&#xff0c;扶摇直上。 博客主页&#xff1a; 姬如祎 收录专栏&#xff1a;C专题 目录 1. 知识引入 2. 运算符重载 2.1 operator<() 2.2 operator() 2.3 o…...

面经pc端项目

创建项目 安装脚手架-----创建项目------选择自定义 sass基础语法 https://www.sass.hk/ sass语法有两个:sass(旧) scss(新) 1.scss语法 和less语法类似,支持嵌套,支持变量… scss: $变量名 less: @变量名 $color:orange; .box{width: 400px;height: 400px;borde…...

三步在两台服务器间迁移conda环境

引言&#xff1a; 背景是我现在要跑的实验在一台服务器上跑有点来不及了&#xff0c;需要将conda环境和文件一起迁移到另一台服务器上。文件的迁移可以用scp或者rsync。但是conda虚拟环境的迁移则不行。 步骤&#xff1a; step 1 将当前的虚拟幻境信息写入environment.yml c…...

websocket服务部署在内网,app无法访问

描述&#xff1a;websocket服务部署在内网&#xff08;ws://&#xff09;&#xff0c;app无法访问外网&#xff0c;需要将内网地址映射到外网 解法&#xff1a;通过nginx配置ws代理&#xff0c;部署nginx的服务器连通的外网和内网&#xff0c;通过nginx配置将原有的ws请求转换…...

vs2010对于c++11的支持

不支持 using代替typedef变参模板for each...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...