如何在javascript中获取任何HTML元素的x轴和y轴位置？

如何在javascript中获取任何HTML元素的x轴和y轴位置？有时，我们想获得一个给定的HTML元素的X和Y轴坐标，如Div和img。

如何获得HTML div元素的x和y轴位置。

Javascript提供DOM API来访问该对象。

getBoundingClientRect() 在javascript中返回元素的大小和与视口有关的位置。

下面是一个语法:

DOMRect  obj=object.getBoundingClientRect()

DOMRect对象包含以下属性:

• bottom
• height
• left
• right
• top
• width
• x
• y

上述所有返回的值都是相对于视口的。

function myFunction() {
  var div = document.getElementById("test");
  var domRect = div.getBoundingClientRect();
  x = domRect.left;
  y = domRect.top;
  w = domRect.width;
  h = domRect.height;
  console.log(domRect)
}

输出:

DOMRect {x: 8, y: 8, width: 152, height: 52, top: 8, …}
bottom: 60
height: 52
left: 8
right: 160
top: 8
width: 152
x: 8
y: 8

使用这个方法很容易得到x和y这样的坐标。

另一种方法是使用添加:

DOMRect.left + window.scrollX for X cordinates DOMRect.top + window.scrollY for Y cordinates

下面是一个在javascript中获取元素偏移量的示例代码

var div = document.getElementById("test");
const docrect = div.getBoundingClientRect();
console.log(docrect.left + window.scrollX),
console.log(docrect.top + window.scrollY)

总结

使用javascript中的getBoundingClientRect()方法检索HTML元素的X和Y位置的多种方法。