js 获取节点相对于屏幕的坐标位置,获取节点的宽高,获取鼠标事件回调的鼠标位置,计算鼠标相对于某个节点下的坐标

获取节点相对于屏幕的坐标位置:

document.getElementById('svgBoxId').getBoundingClientRect()

获取节点的宽高:

document.getElementById('svgBoxId').offsetWidth
document.getElementById('svgBoxId').offsetHeight

获取鼠标事件回调的鼠标位置:

javascript 复制代码
var mouseX = event.pageX;
  var mouseY = event.pageY;
  console.log('鼠标位置:', mouseX, mouseY);

计算鼠标相对于某个节点下的坐标:

鼠标位置 - 节点位置

注意:都是相对于屏幕的位置。

相关推荐
老K的Java兵器库7 小时前
集合性能基准测试报告:ArrayList vs LinkedList、HashMap vs TreeMap、并发 Map 四兄弟
java·开发语言
枫叶丹47 小时前
【Qt开发】多元素类控件(二)-> QTableWidget
开发语言·qt
bin91537 小时前
当AI开始‘映射‘用户数据:初级Python开发者的创意‘高阶函数‘如何避免被‘化简‘?—— 老码农的函数式幽默
开发语言·人工智能·python·工具·ai工具
某柚啊7 小时前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
心.c7 小时前
如何学习Lodash源码?
前端·javascript·学习
Nebula_g8 小时前
Java哈希表入门详解(Hash)
java·开发语言·学习·算法·哈希算法·初学者
努力努力再努力wz8 小时前
【C++进阶系列】:万字详解unordered_set和unordered_map,带你手搓一个哈希表!(附模拟实现unordered_set和unordered_map的源码)
java·linux·开发语言·数据结构·数据库·c++·散列表
励志不掉头发的内向程序员8 小时前
【STL库】哈希表的原理 | 哈希表模拟实现
开发语言·c++·学习·散列表
万粉变现经纪人8 小时前
如何解决 pip install -r requirements.txt 私有仓库认证失败 401 Unauthorized 问题
开发语言·python·scrapy·flask·beautifulsoup·pandas·pip