【JS案例】获取鼠标在盒子内的坐标

最新推荐文章于 2022-12-20 20:02:58 发布

拉朵花

最新推荐文章于 2022-12-20 20:02:58 发布

阅读量1.3k

点赞数 1

分类专栏： JS案例学习文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_46681882/article/details/125879037

版权

本文介绍如何利用JavaScript获取鼠标在带有定位的盒子内的坐标。通过讲解offset系列属性，e.pageX和e.pageY，详细阐述了从获取鼠标位置到计算在盒子内坐标的完整思路，并提供实际执行的代码段。

摘要由CSDN通过智能技术生成

基础知识

我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 可以获得本元素距离带有定位的父级或祖先元素的位置

2. 可以获得元素自身的大小（宽高）

3. 返回的元素都不带数值，如果需要输出或得到该数值，需要加上单位

属性名称	作用
属性名.offsetParent	返回带定位的父元素，如果直到body都没有带定位的，就返回body
属性名.offsetTop	返回元素相对于带定位的父级元素顶部的偏移
属性名.offsetLeft	返回元素相对于带定位的父级元素左边框的偏移
属性名.offsetWidth	返回自身宽度，包括padding、border、content。不带单位
属性名.offsetHeight	返回自身高度ÿ