获取鼠标在盒子中的坐标位置

最新推荐文章于 2025-03-21 14:01:03 发布
最新推荐文章于 2025-03-21 14:01:03 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 前端 文章标签： css3 css javascript offset
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suyuan12365/article/details/122408806
版权

原文：https://www.itheima.com/news/20220107/173540.html

如何获取鼠标在盒子中的位置？在解决这个问题之前，我们先来了解下offset系列属性。

offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等。相关属性如下表所示。

offset系列属性

属性 说明
offsetLeft 返回元素相对其带有定位的父元素左边框的偏移
offsetTop 返回元素相对其带有定位的父元素上方的偏移
offsetWidth 返回自身的宽度(包括padding、边框和内容区域的宽度)。注意返回数值不带单位
offsetHeight 返回自身的高度(包括padding、边框和内容区域的高度)。注意返回数值不带单位
offsetParent 返回作为该元素带有定位元素的父级元素(如果父级都没有定位则返回body)

上表中给出了offset系列的属性及说明，在获取元素的位置和大小时，返回的是数值，没有单位，获取到的元素高度和宽度包括padding、边框

最低0.47元/天 解锁文章
【JS案例】获取鼠标在盒子内的坐标
m0_46681882的博客
07-19 1410
运用offset实现模态框拖拽
html5获取鼠标点击盒子内的坐标
nolanElio的博客
10-28 2936
html代码： <div id="box"></div> css代码： #box{ width: 300px; height: 300px; background-color: red; margin: 100px auto; } js代码： var box = document.getElementById('box'); box.addEventListener('click',function(e){ var x =
计算鼠标在盒子内的坐标
m0_73605639的博客
02-23 127
计算鼠标在盒子内的坐标
获取鼠标在容器中相对位置
is_nul
01-10 1230
let clickContainer=this.$refs['container']; let hOffsetTop=function( elem ){ let top = elem.offsetTop; let parent = elem.offsetParent; while(parent){ top += parent.offsetTop; parent = parent.of
掌握鼠标位置获取技巧
最新发布
weixin_42181686的博客
03-21 1075
Win32 API是Windows操作系统提供的丰富的应用程序接口，它允许开发者在Windows平台上开发各种应用程序。API是Application Programming Interface的缩写，即应用程序编程接口，是操作系统中用来提供给开发者的一种工具集合。Win32 API本身是针对32位系统设计的，但随着技术的发展，Win32 API也被移植到了64位系统中。Win32 API提供了对系统底层操作的访问，包括对系统硬件、窗口管理、图形处理等的控制。
获取鼠标在盒子中的坐标
cnkeysky的博客
02-01 417
获取鼠标在盒子中的坐标
获取鼠标相对盒子的位置
Lily-HU
09-07 553
1、 获取鼠标相对盒子的位置 // 获取鼠标相对盒子的位置 getMousePos(event, el) { event = event || window.event; var pagex = event.pageX || scroll().left + event.clientX; var pagey =...
JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标
01-10 775
分析： 外层边框是浏览器边框，内部盒子是页面的一个盒子，绿点是盒子中鼠标的位置。鼠标相对盒子边框的坐标=页面中（注意不是浏览器）鼠标坐标-盒子相对于浏览器边框的偏移量 第一步：求浏览器边框位置 x=element.offsetLeft; y=element.offsetTop; 代码如下： 1 /*************样式表*************...
JavaScript-219：计算鼠标在盒子中的坐标
臧小川的博客
03-10 894
效果图 结构 <div class="box"></div> CSS .box { width: 200px; height: 200px; background-color: pink; margin: 200px; } JS // 我们在盒子内点击 想要得到鼠标距离盒子左右的距离 // 首先得到鼠标在页面中的
JavaScript 获取鼠标在盒子里的坐标
火星基地
10-26 766
实现思路： 在盒子内点击，想要得到鼠标距离盒子左右的距离 首先得到鼠标在页面中的坐标e.pageX,e.page 其次得到盒子在页面中的距离box.offsetLeft,box.offsetTop 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动mousemove 效果： 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta ch
飞易来文盒双头版测试工具软件 非原版 具有相对移动的上下左右功能，测试时更加直观
05-10
飞易来文盒双头版测试工具软件 具有相对移动的上下左右功能，测试时更加直观，具有按键测试，相对移动归零位，回车，相对移动到指定位置，可输入相对坐标，鼠标单击等功能。
获取鼠标当前坐标
02-15
获取鼠标在当前屏幕坐标系中的位置信息 将鼠标移动到要获取位置的点，然后按F10，就会弹出当前的坐标值
鼠标按下以及松开事件，实现容器在网页移动任意位置
ariutaiaa
05-25 715
<template> <div class="main"> <div class="mainf" v-bind:style="main_block" @mousedown="sum_block_ON"></div> </div> </template> <script> export default { data() { return{ main_block:'' } .
怎样给盒子建立坐标轴html,html布局（盒子）
weixin_39615596的博客
05-31 242
在body里面放置两个盒子，里面盒子设置margin-top，外层盒子生效？在里面盒子上面加一个块元素，设置高度表单form action="地址" method="get/post"input type:text passwordbutton checkbox radio reset submit filetextarea 文本域上传的键name规定，必须写上传的值value规定，可写可不写pl...
JavaScript-220：计算鼠标在盒子中的坐标
臧小川的博客
03-10 455
计算鼠标在盒子中的坐标
怎样获取鼠标在盒子中的位置？
zy1992As的博客
03-05 169
第30行代码通过鼠标指针移动事的对象获取到鼠标指针在页面中的坐标。上表中给出了ofset系列的属性及说明，在获取元素的位置和大小时，返回的是数值，没有单位，获取到的元素高度和宽度包括padding、边框和内容区域的宽度。从上图中可以看出，通过鼠标指针在body中横纵坐标分别减去盒子距离左边框的偏移量和盒子距离上边的偏移量，可以得到鼠标指针在盒子内部的横纵坐标。从上图中可以看出，通过鼠标指针在body中横纵坐标分别减去盒子距离左边框的偏移量和盒子距离上边的偏移量，可以得到鼠标指针在盒子内部的横纵坐标。
元素偏移量 offset —— 获取鼠标在盒子内的坐标
赚钱养自个儿的博客
05-02 678
    学习来源：https://www.bilibili.com/video/BV1HJ41147DG   要求  在盒子内点击，得到鼠标距离盒子左右的距离。 思路 首先得到鼠标在页面中的坐标（e.pageX, e.pageY） 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop) 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 如果...
原生JS，webAPI，案例：计算鼠标在盒子内的坐标
原生JS，webAPI，案例
07-18 309
<style> .box { width: 300px; height: 300px; background-color:skyblue; margin: 200px; } </style> <body> <...
当鼠标在大盒子中移动时，在小盒子中显示坐标
06-12
在事件处理程序中，获取鼠标在大盒子中的坐标，并将其转换为在小盒子中的坐标。最后，将小盒子的坐标更新为转换后的坐标即可。 下面是一个示例代码： ```html ; height: 300px; background-color: #eee;"> ; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值