得到对象以及鼠标在页面的绝对位置

最新推荐文章于 2023-07-07 16:58:03 发布
最新推荐文章于 2023-07-07 16:58:03 发布
阅读量574 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Html 文章标签： null function object 浏览器 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qiaolunihao/article/details/1868645
本文介绍了一种获取网页元素绝对位置的方法，并提供了JavaScript函数实现。同时列举了多种浏览器中用于获取页面尺寸、位置及鼠标坐标的相关属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

获取页面元素的位置对我们很重要，如何获得元素位于页面的绝对位置呢？通过offsetLeft,offsetTop可以获得对象的左边距和上边 距，但是不同浏览器因为对象处于的地位而会有些不同的解析，例如有些时候计算边距时没有把parent的边距计算进去，下面的函数将可以获得对象绝对的位 置。

如下：
// get absolute Left position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对左边距离
function getAbsoluteLeft( ob ){
 if(!ob){return null;}
   var obj = ob;
   var objLeft = obj .offsetLeft;
   while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
     objLeft += obj .offsetParent.offsetLeft;
     obj = obj .offsetParent;
   }
 return objLeft ;
}

// get absolute TOP position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对上边距离
function getAbsoluteTop( ob ){
 if(!ob){return null;}
 var obj = ob;
 var objTop = obj .offsetTop;
 while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
   objTop += obj .offsetParent.offsetTop;
   obj = obj .offsetParent;
 }
 return objTop ;
}

获得页面的的宽高，左右边距有这些：
window.screen.width;
window.screen.height;
window.document.body.offsetWidth;
window.document.body.offsetHeight;
window.screen.availWidth;
window.screen.availHeight;
window.document.body.offsetWidth;
window.document.body.offsetHeight;
window.screen.availWidth;
window.screen.availHeight;
window.document.body.scrollWidth;
window.document.body.scrollHeight;
window.document.body.clientHeight;
window.document.body.clientWidth;

通过事件来获得鼠标位置主要有这些:
e.layerX;
e.layerY;
e.pageX;
e.pageY;
e.screenX;
e.screenY;
e.offsetX;
e.offsetY;
e.clientX;
e.clientY;

//获得对象相对于父级的位置
obj .offsetLeft;
obj .offsetTop;
obj .offsetWidth;
obj .offsetHeight;

下面是各浏览器关于页面位置的全部属性,包括获得鼠标位于该位置的实时x,y坐标：getPosition.html
<body>
<div id="object" style="background-color:green;color:white" onmousemove="getPosition(this,event);" >object,请在此处移动鼠标</div>
<div id="showinfo"></div>
<script>

// get absolute Left position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对左边距离
function getAbsoluteLeft( ob ){
 if(!ob){return null;}
   var obj = ob;
   var objLeft = obj .offsetLeft;
   while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
     objLeft += obj .offsetParent.offsetLeft;
     obj = obj .offsetParent;
   }
 return objLeft ;
}

// get absolute TOP position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对上边距离
function getAbsoluteTop( ob ){
 if(!ob){return null;}
 var obj = ob;
 var objTop = obj .offsetTop;
 while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
   objTop += obj .offsetParent.offsetTop;
   obj = obj .offsetParent;
 }
 return objTop ;
}

var str="";
str+="<br><font color=gray>window.screen.width</font> "+window.screen.width;
str+="<br><font color=gray>window.screen.height</font> "+window.screen.height;
str+="<br><font color=gray>window.document.body.offsetWidth</font> "+window.document.body.offsetWidth;
str+="<br><font color=gray>window.document.body.offsetHeight</font> "+window.document.body.offsetHeight;
str+="<br><font color=gray>window.screen.availWidth</font> "+window.screen.availWidth;
str+="<br><font color=gray>window.screen.availHeight</font> "+window.screen.availHeight;
str+="<br><font color=gray>window.document.body.offsetWidth</font> "+window.document.body.offsetWidth;
str+="<br><font color=gray>window.document.body.offsetHeight</font> "+window.document.body.offsetHeight;
str+="<br><font color=gray>window.screen.availWidth</font> "+window.screen.availWidth;
str+="<br><font color=gray>window.screen.availHeight</font> "+window.screen.availHeight;
str+="<br><font color=gray>window.document.body.scrollWidth</font> "+window.document.body.scrollWidth;
str+="<br><font color=gray>window.document.body.scrollHeight</font> "+window.document.body.scrollHeight;
str+="<br><font color=gray>window.document.body.clientHeight</font> "+window.document.body.clientHeight;
str+="<br><font color=gray>window.document.body.clientWidth</font> "+window.document.body.clientWidth;

var str1="";
function getPosition(obj,e){
str1="";
//str1 += str;
str1+="<br><font color=gray>e.layerX</font> "+e.layerX;
str1+="<br><font color=gray>e.layerY</font> "+e.layerY;
str1+="<br><font color=gray>e.pageX</font> "+e.pageX;
str1+="<br><font color=gray>e.pageY</font> "+e.pageY;
str1+="<br><font color=gray>e.screenX</font> "+e.screenX;
str1+="<br><font color=gray>e.screenY</font> "+e.screenY;
str1+="<br><font color=gray>e.offsetX</font> "+e.offsetX;
str1+="<br><font color=gray>e.offsetY</font> "+e.offsetY;
str1+="<br><font color=gray>e.clientX</font> "+e.clientX;
str1+="<br><font color=gray>e.clientY</font> "+e.clientY;
//
str1+="<br><font color=gray>obj.offsetLeft</font> "+ obj .offsetLeft;
str1+="<br><font color=gray>obj.offsetTop</font> "+ obj .offsetTop;
str1+="<br><font color=gray>obj.offsetWidth</font> "+ obj .offsetWidth;
str1+="<br><font color=gray>obj.offsetHeight</font> "+ obj .offsetHeight;

str1+="<hr> 绝对左边距"+ getAbsoluteLeft(obj);
str1+="<hr> 绝对上边距"+ getAbsoluteTop(obj);
 document.getElementById("showinfo").innerHTML = str1;

}

document.write( str );
//alert(str)
</script>

 
鼠标单击时jq特效
qq_33543447的博客
10-09 963
type="text/javascript">   /* 鼠标特效 */   var a_idx = 0;   jQuery(document).ready(function($) {   $("body").click(function(e) {   var a = new Array("富强", "民主", "文明", "和谐", "
获取鼠标在页面上的位置（包括滚动条）
04-06
主要获取鼠标在页面上的位置，包括当页面有滚动条的时候。。
获取点击元素的绝对位置
weixin_34387284的博客
10-23 854
const rect = e.target.getBoundingClientRect()this.setState({ shareTop: rect.top, shareLeft: rect.left + 80}) 转载于:https://www.cnblogs.com/LP1204/p/9837279.html
鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标
A458545418的博客
11-17 313
1 <html> 2 <head> 3 <style> 4 #oneDiv{ 5 position :absolute ; 6 left:200px; 7 top:100px; ...
[JavaScript]获取鼠标点击区域的相对、绝对位置坐标
热门推荐
Konaji
07-07 1万+
[JavaScript]获取鼠标点击区域的相对、绝对位置坐标
html5 js获取鼠标坐标,JavaScript取得鼠标绝对位置程序代码介绍
weixin_28683165的博客
06-02 480
首先不同浏览器中event位置属性的分析:1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离)2. Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离)3. event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离)4. IE的event.offsetX,event.o...
JavaScript取得鼠标绝对位置程序代码介绍
10-27
在JavaScript中，获取鼠标在页面上的绝对位置是一项常见的需求，这有助于实现如拖放功能、鼠标跟随效果等交互式功能。本文将详细介绍如何在不同浏览器环境下通过JavaScript获取鼠标绝对位置的方法。 首先，我们需要...
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
10-26
在Web开发中，获取页面元素的位置是一个常见的需求，它可以帮助开发者进行DOM操作，实现元素间的定位、布局调整等功能。使用jQuery库时，我们可以利用其提供的方法来获取元素的绝对和相对位置，这些位置通常用元素...
javascript 获取鼠标的绝对位置 event
12-12
然而，`clientX`和`clientY`提供的坐标是相对于浏览器窗口的，如果我们需要获取鼠标的页面绝对位置，还需要考虑滚动条的影响。这时，我们可以使用`pageX`和`pageY`属性，它们提供了鼠标位置相对于整个HTML页面的坐标...
JavaScript获取鼠标位置和鼠标与div的相对位置
08-10
在这个示例中，我们首先获取了div元素的边界信息，然后计算鼠标事件的坐标与div元素左上角坐标的差值，从而得到相对位置。 3. **考虑滚动条和页面缩放：** 当浏览器窗口有滚动条或者页面进行了缩放时，`clientX` ...
得到对象以及鼠标在页面的绝对位置(转)
weixin_34210740的博客
09-16 96
获取页面元素的位置对我们很重要，如何获得元素位于页面的绝对位置呢？通过offsetLeft,offsetTop可以获得对象的左边距和上边距，但是不同浏览器因为对象处于的地位而会有些不同的解析，例如有些时候计算边距时没有把parent的边距计算进去，下面的函数将可以获得对象绝对的位置。如下：// get absolute Left position//建立者:jiarry@hotmail.com//...
js获取元素在浏览器中的绝对位置
12-03
JavaScript中提供获取HTML元素位置的属性： HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要注意的是，这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置，而是相对于其父元素位置的相对位置，也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢，可以用以下函数： 代码如下: //获取元素的纵坐标 function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=ge
获取页面的滚动位置与鼠标事件中的坐标
牧童
09-06 984
[code="js"] /** 获取当前滚动的位置。 */ function getScrollingPosition() { var position = [0, 0]; //FF if (typeof window.pageYOffset != 'undefined') { position = [ window.pageXOffset, ...
JavaScript获得鼠标绝对位置
wangleide414的专栏
09-12 116
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt; New Document &lt;/title&gt;&lt;meta name="Generator" content="EditPlus"&
获取元素相对于页面的位置 和 页面高度 和 页面滚动高度
weixin_30832351的博客
09-22 424
获取元素相对于页面的位置 参考： http://apply-templates.com/en/blog?title=Finding%20element%20position%20in%20Javascript http://www.quirksmode.org/js/findpos.html http://www.codeproject.com/KB/scripting/dom-eleme...
html获取鼠标绝对坐标,JavaScript获取网页元素的绝对坐标
weixin_39851977的博客
06-05 145
function findPosX(obj) {var curleft = 0;if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回bodywhile (obj.offsetParent) {//遍历所有父类元素curleft += obj.offsetLeft;//当前元素的左边距obj = obj.offsetParent;}} else if ...
JavaScript面试题
qq_57112519的博客
07-06 1万+
一、单选题（共20题，每题2分）得分：2.0分 1.下面可以获取浏览器在卷动后，隐藏的文档部分的高度的属性是 A window.body.scrollTop B document.body.scrollTop; C document.scrolTop; D documentElement.body.scrollTop 正确答案: B 解析:基础属性 2.在HTML页面中，下列选项不属于键盘相关事件的是 A onkeyup B onkeydown C oncontextmenu D onkey
JS中的小实例
qq_53740827的博客
07-07 236
获取鼠标坐标、打印菱形、随机颜色
js获取鼠标坐标的方法
weixin_45817492的博客
04-01 1万+
js获取鼠标坐标的方法
获取鼠标位置并在其旁边加一行字体
最新发布
07-30
<think>根据用户的问题，用户希望在前端开发中实现：获取鼠标位置并在其旁边显示一行文字。这是一个典型的鼠标跟踪和动态显示文本的需求。 我们将分步骤实现： 1. 监听鼠标移动事件，获取鼠标的坐标（x, y）。 2. 创建一个元素（比如div）用于显示文本，并设置其定位方式为绝对定位（absolute），这样我们可以通过设置top和left来改变其位置。 3. 在鼠标移动时，更新这个元素的位置和内容。 注意：为了避免页面频繁重绘，可以使用节流（throttle）来优化，但这里我们先实现基本功能。 示例代码如下： HTML部分： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示鼠标位置</title> <style> #tooltip { position: absolute; background: #eee; border: 1px solid #ccc; padding: 5px; display: none; /* 默认隐藏 */ } </style> </head> <body> <div id="tooltip"></div> <script src="script.js"></script> </body> </html> ``` JavaScript部分（script.js）： ```javascript // 获取要显示文本的元素 const tooltip = document.getElementById('tooltip'); // 监听整个文档的鼠标移动事件 document.addEventListener('mousemove', function(e) { // 获取鼠标的坐标 let x = e.clientX; let y = e.clientY; // 更新tooltip的位置和内容 tooltip.style.display = 'block'; tooltip.style.left = (x + 10) + 'px'; // 在鼠标右侧10px显示 tooltip.style.top = (y + 10) + 'px'; // 在鼠标下方10px显示 tooltip.textContent = `鼠标位置: (${x}, ${y})`; }); // 可选：当鼠标离开某个区域时隐藏，但这里我们一直显示，所以不需要 // 如果需要在鼠标离开窗口时隐藏，可以监听mouseout事件，但这里不实现 ``` 以上代码实现了基本功能：当鼠标移动时，会在鼠标右下方10px处显示一个框，内容为鼠标的坐标。 但是，这个示例中，当鼠标移动时，提示框会一直显示。如果用户希望在某些情况下隐藏（比如鼠标停止移动一段时间后），可以添加定时器来隐藏。但根据问题，我们只需要在鼠标旁边显示，所以这个基本满足。 另外，如果用户希望提示框跟随鼠标移动时平滑一些，可以考虑使用CSS过渡效果，但坐标更新是瞬间完成的，所以通常不需要过渡。 如果用户希望避免过多的重绘，可以限制事件处理函数的执行频率（比如使用requestAnimationFrame或节流函数），这里我们不做优化，因为这是一个简单的示例。 注意：clientX和clientY是相对于视口的坐标。如果需要相对于整个文档的坐标，可以使用pageX和pageY（在页面没有滚动时，两者相同；有滚动时，pageY包含了滚动距离）。 根据用户需求，我们使用clientX和clientY即可，因为通常我们关心的是视口中的位置。 如果用户需要相对于某个特定元素的位置，则可以将事件监听绑定在该元素上，并计算相对于该元素的坐标。 现在，我们来生成相关问题。</think>### 获取鼠标位置并显示文本的实现方法 在前端开发中，可以通过以下步骤实现鼠标位置追踪和文本显示： #### 核心实现代码 ```html <!DOCTYPE html> <html> <head> <style> #tooltip { position: absolute; /* 关键：绝对定位 */ background: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 3px; pointer-events: none; /* 防止干扰鼠标事件 */ z-index: 1000; display: none; /* 初始隐藏 */ } </style> </head> <body> <!-- 显示鼠标位置的文本元素 --> <div id="tooltip">鼠标位置</div> <script> const tooltip = document.getElementById('tooltip'); // 监听鼠标移动事件 document.addEventListener('mousemove', (e) => { // 获取鼠标坐标 const mouseX = e.clientX; const mouseY = e.clientY; // 更新文本内容和位置 tooltip.textContent = `坐标: (${mouseX}, ${mouseY})`; tooltip.style.left = (mouseX + 15) + 'px'; // 向右偏移15px tooltip.style.top = (mouseY + 15) + 'px'; // 向下偏移15px tooltip.style.display = 'block'; }); // 可选：鼠标移出窗口时隐藏 document.addEventListener('mouseout', () => { tooltip.style.display = 'none'; }); </script> </body> </html> ``` #### 关键点说明 1. **获取鼠标位置**： - 使用 `mousemove` 事件监听器 - 通过事件对象获取坐标： - `e.clientX`：相对于视口的水平坐标 - `e.clientY`：相对于视口的垂直坐标 2. **显示文本**： - 创建绝对定位的 `<div>` 元素 - 动态更新位置：`element.style.left/top` - 添加偏移量避免遮挡鼠标指针 3. **坐标类型**： - `clientX/Y`：视口相对坐标（最常用） - `pageX/Y`：文档相对坐标（包含滚动偏移） - `screenX/Y`：屏幕绝对坐标 #### 进阶优化 ```javascript // 添加平滑动画 tooltip.style.transition = 'transform 0.2s ease'; tooltip.style.transform = `translate(${mouseX + 15}px, ${mouseY + 15}px)`; // 节流处理高频事件（优化性能） let lastMove = 0; document.addEventListener('mousemove', (e) => { const now = Date.now(); if (now - lastMove < 32) return; // 约30fps lastMove = now; // 更新位置... }); ``` #### 不同场景下的坐标获取 | 坐标类型 | 获取方式 | 特点说明 | |----------------|---------------------|----------------------------| | 视口相对坐标 | `e.clientX`/`clientY` | 忽略页面滚动，最常用 | | 文档相对坐标 | `e.pageX`/`pageY` | 包含滚动偏移 | | 元素相对坐标 | `e.offsetX`/`offsetY`| 相对于当前目标元素的位置 | | 屏幕绝对坐标 | `e.screenX`/`screenY`| 相对于物理屏幕的位置 | [^1]: 鼠标事件接口规范参考 MDN Web Docs
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值