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);

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

鼠标位置 - 节点位置

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

相关推荐
GISer_Jing23 分钟前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
风语者66624 分钟前
perl踩坑系列===正则表达式第2坑---split中的“或”操作符
开发语言·正则表达式·perl
狂团商城小师妹32 分钟前
JAVA露营基地预约户外露营预约下单系统小程序
java·开发语言·微信小程序·小程序
大飞pkz1 小时前
【设计模式】策略模式
开发语言·设计模式·c#·策略模式
奶糖 肥晨2 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
"菠萝"2 小时前
C#知识学习-015(修饰符_4)
开发语言·windows·c#
个人看法2 小时前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
无名指的等待7122 小时前
Redisson的Lock和TryLock的区别
java·开发语言·数据库
yanqiaofanhua3 小时前
C语言自学--自定义类型:结构体
c语言·开发语言·算法
Skrrapper3 小时前
【C++】STL:Stack详解
开发语言·c++