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

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

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

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

获取节点的宽高:

document.getElementById('svgBoxId').offsetWidth

document.getElementById('svgBoxId').offsetHeight

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

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

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

鼠标位置 - 节点位置

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

相关文章:

  • 【量化科普】Leverage,杠杆
  • Java中的锁机制:synchronized vs ReentrantLock,如何选择?
  • Python 函数式编程-装饰器
  • css中overflow-x:auto无效
  • 一周学会Flask3 Python Web开发-Jinja2模版中加载静态文件
  • 快速理解Raft分布式共识算法
  • CAS (Compare and swap “比较和交换“) [ Java EE 初阶 ]
  • 【借助深度学习剖析股票数据,实现优质股涨幅预测及推送通知】
  • 用PySpark和PyTorch实现跨境支付Hive数据仓库的反洗钱数据分析
  • python基础学习day01
  • JavaScript基础(BOM对象、DOM节点、表单)
  • javascript-es6 (五)
  • redission的原理
  • JS UI库DHTMLX Suite 发布v9.1:具有行扩展器、多重排序、多用户后端等功能的网格
  • 《算法笔记》9.6小节 数据结构专题(2)并查集 问题 A: 通信系统
  • IO 和NIO有什么区别?
  • 2025.2.26总结
  • 机试刷题_面试题 08.08. 有重复字符串的排列组合【python】
  • 算法day1 dfs搜索2题
  • 智绘教:Windows平台上的高效悬浮窗画笔工具深度解析
  • 押井守在30年前创造的虚拟世界何以比当下更超前?
  • 香港特区立法会通过条例草案便利外地公司迁册来港
  • 沪喀同心|为新疆青少年提供科普大餐,“小小博物家(喀什版)”启动
  • 文化润疆|为新疆青少年提供科普大餐,“小小博物家(喀什版)”启动
  • 广东省原省长卢瑞华逝世,享年88岁
  • 三大股份制银行入局AIC,一级市场再迎“活水”