JavaScript获取元素绝对坐标的函数实现

作者:代码拾荒

时间:2026-10-27

浏览:294

本文介绍了如何使用JavaScript计算触发事件的元素在整个网页中的绝对X和Y坐标。通过遍历offsetParent链,累加offsetLeft和offsetTop,分别实现了获取完整坐标数组及单独X、Y坐标的函数。

文章目录

JavaScript获取元素绝对坐标的函数实现

实现思路如下:


// 代码复制区

具体代码实现如下:

// 返回包含X和Y坐标的数组
function findPosition(oElement) { // oElement 为当前需要计算坐标的元素
if (typeof (oElement.offsetParent) != 'undefined') {
for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
                }
            }
var array = [posX, posY];
return array;
        }
// 获取触发事件的控件在整个页面的绝对X坐标
function findPositionX(oElement) {
if (typeof (oElement.offsetParent) != 'undefined') {
for (var posX = 0; oElement; oElement = oElement.offsetParent)
                {
posX += oElement.offsetLeft;
                }
            }
return posX;
        }
// 获取触发事件的控件在整个页面的绝对Y坐标
function findPositionY(oElement) {
if (typeof (oElement.offsetParent) != 'undefined') {
for (var posY = 0; oElement; oElement = oElement.offsetParent) {
posY += oElement.offsetTop;
                }
            }
return posY;
        } 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章