JavaScript获取元素绝对坐标的函数实现
作者:代码拾荒时间:2026-10-27 19:35:47浏览:295
本文介绍了如何使用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;
} 作者最新文章
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
