JavaScript如何获取元素坐标的方法和示例代码

JavaScript如何获取元素坐标的方法和示例代码 第一张

JavaScript如何获取元素坐标

JavaScript可以通过计算元素的offsetLeft和offsetTop属性来获取元素的坐标。offsetLeft属性表示元素的左外边框距离其父元素(offsetParent)左内边框的距离,offsetTop属性表示元素的上外边框距离其父元素(offsetParent)上内边框的距离。

下面是一个获取元素坐标的示例代码:

function getElementPosition(ele) {
    var x = 0;
    var y = 0;
    while(ele) {
        x += ele.offsetLeft;
        y += ele.offsetTop;
        ele = ele.offsetParent;
    }
    return {x: x, y: y};
}

上面的代码实现了获取元素坐标的功能,该函数接受一个参数ele,表示要获取坐标的元素,函数会遍历ele的父元素,累加每个父元素的offsetLeft和offsetTop属性,返回一个对象,该对象包含两个属性x和y,表示元素ele的坐标。

要使用上面的函数,只需要将要查询的元素作为参数传入函数,例如:

var ele = document.getElementById("myElement");
var pos = getElementPosition(ele);
console.log(pos.x, pos.y);

上面的代码获取id为myElement的元素的坐标,并将坐标保存在pos变量中,打印出来。

© 版权声明
THE END
分享