获取页面某一元素的绝对X,Y坐标，可以用offset()方法

最新推荐文章于 2021-07-04 15:07:01 发布
原创 最新推荐文章于 2021-07-04 15:07:01 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用jQuery来获取页面中指定元素的位置信息，包括相对于整个页面的位置（包含滚动条偏移）以及相对于其父元素的位置。 

//获取窗口位置: 
var X = $('#DivID').offset().top; 
var Y = $('#DivID').offset().left; 
//获取相对(父元素)位置: 
var X = $('#DivID').position().top; 
var Y = $('#DivID').position().left;

科爱
关注
元素偏移量 offset —— 获取鼠标在盒子内的坐标
赚钱养自个儿的博客
05-02 716
    学习来源：https://www.bilibili.com/video/BV1HJ41147DG   要求  在盒子内点击，得到鼠标距离盒子左右的距离。 思路 首先得到鼠标在页面中的坐标（e.pageX, e.pageY） 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop) 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 如果...
c 获取html页面元素的位置,HTML如何检索元素的位置(X,Y)？
weixin_42522275的博客
06-03 296
元素的位置(X,Y)表示文档中元素在左上角的坐标；X代表水平位置，Y代表垂直位置。可以使用element.getBoundingClientRect()属性来获取元素的位置。下面本篇文章就来给大家介绍一下getBoundingClientRect()属性，希望对大家有所帮助。...
html获取当前x y值,HTML如何检索元素的位置(X,Y)？
weixin_39640573的博客
06-07 734
getBoundingClientRect用于获取某个元素相对于视窗的位置，以像素为单位。1、语法：rectObject=object.getBoundingClientRect();注：这个方法没有参数。2、返回值：3、示例下面通过示例来看看如何使用element.getBoundingClientRect()属性来检索元素的位置(X,Y)。示例1：元素位置function getPositio...
JS之获取offsetX 的方法
czw333的专栏
11-30 1861
// 该方法经过IE6 FF3.5的测试 function getOffsetX(evt){ if( evt.offsetX ) return evt.offsetX; var ele = evt.target || evt.srcElement; var o = ele; var x=0; while( o.offsetParent...
获取元素准确的offset
qq_33051709的博客
07-04 554
通过getBoundingClientRect获取（推荐） const getOffset = (element: HTMLElement) => { const elemRect = element.getBoundingClientRect(); const offsetY = elemRect.top + window.scrollY; const offsetX = elemRect.left + window.scrollX; return {
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
10-26
使用jQuery库时，我们可以利用其提供的方法来获取元素的绝对和相对位置，这些位置通常用元素左上角的X和Y坐标来表示。 首先，我们来了解一下如何通过jQuery获取页面元素的绝对位置。绝对位置指的是元素相对于整个...
jQuery获取页面元素绝对与相对位置的方法
12-02
获取页面某一元素的绝对X,Y坐标，可以用offset()方法： var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID')...
jquery用offset()方法获得元素的xy坐标
10-25
其中，offset()是jQuery提供的一个方法，用于获取元素的当前相对于文档的偏移坐标。这个方法非常实用，尤其是在进行页面元素定位和布局调整时。 使用offset()方法时，可以获取到元素的top和left属性值，分别代表...
获取页面中某元素的绝对坐标
xgbm_k的专栏
05-15 2803
资料获取地址：http://bbs.youkuaiyun.com/topics/330251962 今天要获取绝对坐标不知道咋搞，查了下发现可以这样做：/// <summary> /// 获得元素的绝对坐标 /// </summary> /// <param name="element">HTML元素</param> function absolutePoint(element) { var resu
获取网页某个元素坐标的方法
数据之旅的点点滴滴
10-24 1万+
用python的selenium写爬虫通过绝对坐标点击，坐标的获取方法（谷歌浏览器）： 网页F12打开源代码，在console窗口输入 document.querySelectorAll('css选择器')[0].getBoundingClientRect().left + document.documentElement.scrollLeft document.querySelectorAl...
网页元素坐标表示及坐标计算方法
weixin_42080566的博客
04-29 1万+
一、页面元素坐标种类    根据DOM的鼠标事件（参见https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent），浏览器响应鼠标事件时，会上报四类坐标：1、(pageX，pageY)：相对于整个网页的坐标，因此坐标点可能比实际屏幕尺寸大。该坐标属于绝对坐标，不随着页面滚动而变化，当网页渲染完毕后，每个元素的page坐标就已固定。2、(c...
获取元素的绝对坐标
Lambert0320的博客
07-13 1120
首先了解元素几个属性： offsetLeft 元素相对于父元素的x offsetTop 元素相对于父元素的y offsetParent 元素的父元素 function getLeft(element){ let offset  = element.offsetLeft; if(element.offsetParent){ offset+=getLeft(element.offsetP
python爬虫之定位网页元素的三种方式
热门推荐
Barry的博客
08-02 4万+
在做爬虫的过程中，网页元素的定位是比较重要的一环，本文总结了python爬虫中比较常用的三种定位网页元素的方式。 1.普通的BeautifulSoup find系列操作 2.BeautifulSoup css选择器 3. xpath 这三种方式灵活运用，再配合上正则表达式，没有什么网页能难倒你啦。 我们以获取豆瓣电影top250第一页的电影标题为例来比较： import reques...
HTML 页面中的位置：clientX、screenX、offsetX、pageX
抱朴守拙
03-03 1万+
事件中鼠标的 (x,y) 位置 clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变； clientY 鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变； pageX 鼠标相对于浏览器左上角x轴的坐标； 随滚动条滚动而改变； pageY 鼠标相对于浏览器左上角y轴的坐标； 随滚动条滚动而改变； screenX 鼠标相对于显示器屏幕左上角x轴的坐标； scre...
在需要的位置，弹出Div层；jquery获取对象坐标|
wangsen2235068的专栏
08-05 1万+
获取页面某一元素的绝对X,Y坐标，可以用offset()方法： var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置，用position().父元素的position必须是relative var X = $('#DivID').position().top; var Y =
js获取元素相对于父级元素的高度
lx_1024的博客
12-20 3万+
js获取元素相对于父级元素的高度 1. offsetLeft 、offsetTop      用于获取子元素相对于父元素的位移（左位移、上位移）            console.log(oNode.offsetLeft); 2. offsetWidth、offsetHeight      用于获取元素的可见宽度和可见高度            cons
getBoundingClientRect的用法
weixin_30420305的博客
04-26 559
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。 1.语法：这个方法没有参数。 rectObject = object.getBoundingClientRect(); 2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右， 下，和左）表示的坐标的矩形，以像素为...
如何查看html元素在屏幕上的坐标
最新发布
06-28
<think>我们已掌握的关键信息：1.用户需求：获取HTML元素在屏幕上的坐标（绝对坐标，相对于屏幕左上角）2.已有方法：JavaScript原生方法（getBoundingClientRect+ window.screenX/Y）、jQuery方法（offset() +window.screenX/Y）、Python +Selenium方法3.注意事项：坐标系差异（屏幕坐标、视口坐标、页面坐标）、滚动影响、多显示器、iframe处理等根据引用内容，我们可以总结出核心公式：屏幕坐标X =元素相对于视口的left+浏览器窗口相对于屏幕的X偏移量屏幕坐标Y =元素相对于视口的top+浏览器窗口相对于屏幕的Y偏移量其中：-元素相对于视口的位置：通过`getBoundingClientRect()`获取（包括left,top,right,bottom等）-浏览器窗口相对于屏幕的位置：通过`window.screenX`和`window.screenY`（或兼容写法`window.screenLeft`,`window.screenTop`）获取因此，我们将重点放在JavaScript原生方法上，并补充一些细节和注意事项。回答结构：1.核心方法：JavaScript原生实现（详细步骤和代码）2.其他方法：jQuery实现（简要）3.常见问题处理（滚动、多显示器、iframe等）4.验证方法（开发者工具）5.相关问题生成注意：用户提供的引用[4]中给出了一个计算元素中央位置的例子，但我们要的是左上角坐标，所以调整公式即可。</think>要获取HTML元素在屏幕上的绝对坐标（相对于物理屏幕左上角），请按照以下步骤操作： ### 核心方法（JavaScript原生实现） ```javascript function getElementScreenPosition(element) { // 1. 获取元素相对于浏览器视口的位置 const rect = element.getBoundingClientRect(); // 2. 获取浏览器窗口相对于屏幕的位置 const windowLeft = window.screenX || window.screenLeft; const windowTop = window.screenY || window.screenTop; // 3. 计算屏幕绝对坐标 return { x: Math.round(rect.left + windowLeft), y: Math.round(rect.top + windowTop) }; } // 使用示例 const element = document.getElementById("targetElement"); const position = getElementScreenPosition(element); console.log(`屏幕坐标: X=${position.x}, Y=${position.y}`); ``` ### 关键原理说明 1. **`getBoundingClientRect()`** 返回元素相对于**浏览器视口**的位置对象，包含： - `left`：元素左边界到视口左边的距离 - `top`：元素上边界到视口顶部的距离 - `width`/`height`：元素尺寸（当需要计算中心点时使用）[^1] 2. **窗口位置补偿** - `window.screenX/Y`：现代浏览器中窗口左上角相对于屏幕左上角的偏移量 - `window.screenLeft/Top`：旧版IE兼容方案[^4] 3. **坐标系转换** $$ \text{屏幕坐标} = \text{元素视口坐标} + \text{窗口屏幕偏移} $$ ![坐标系转换示意图](https://example.com/coord-system.png) *(示意图：视口坐标 → 屏幕坐标转换)* ### 特殊场景处理 #### 1. 多显示器环境 ```javascript // 处理副屏坐标（坐标可能为负值） const screenX = rect.left + (window.screenX !== undefined ? window.screenX : window.screenLeft); const screenY = rect.top + (window.screenY !== undefined ? window.screenY : window.screenTop); ``` #### 2. 框架(iframe)内元素 ```javascript // 先获取iframe元素 const iframe = document.getElementById("myFrame"); // 切换到iframe文档 const innerDoc = iframe.contentDocument || iframe.contentWindow.document; // 再获取内部元素坐标 const innerElement = innerDoc.getElementById("innerElement"); const innerPosition = getElementScreenPosition(innerElement); ``` #### 3. 获取元素中心点 ```javascript const centerX = position.x + rect.width / 2; const centerY = position.y + rect.height / 2; ``` ### 验证方法（Chrome开发者工具） 1. 按 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd> 选择元素 2. 在Console执行： ```javascript // 验证视口坐标 $0.getBoundingClientRect() // 验证屏幕坐标计算 const rect = $0.getBoundingClientRect(); const screenX = rect.left + (window.screenX || window.screenLeft); const screenY = rect.top + (window.screenY || window.screenTop); ``` ### 其他技术方案 #### jQuery实现 ```javascript const screenX = $("#element").offset().left + (window.screenX || window.screenLeft); const screenY = $("#element").offset().top + (window.screenY || window.screenTop); ``` *注意：`offset()`获取的是文档坐标，已包含滚动偏移[^3]* #### Python + Selenium ```python from selenium import webdriver driver = webdriver.Chrome() driver.get("https://example.com") element = driver.find_element_by_id("element") # 获取视口坐标 location = element.location # 获取窗口偏移 window_left = driver.execute_script("return window.screenX || window.screenLeft") window_top = driver.execute_script("return window.screenY || window.screenTop") # 计算屏幕坐标 screen_x = location['x'] + window_left screen_y = location['y'] + window_top ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值