如何获取元素的元素 clientX 和 clientY

Question

是否可以使用 DOM api 将 pageX 、 pageY 转换为 clientX 、clientY ？

我有一个元素，我需要找到 clientX 和 clientY 。我可以使用 jquery 的 offset 方法轻松获取 pageX 和 pageY。但我对获取 clientX 和 clientY 感兴趣。不涉及鼠标事件。

Answer 1

var element = document.getElementById(...);
var clientRect = element.getBoundingClientRect();
var clientX = clientRect.left;
var clientY = clientRect.top;

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

参考：https : //developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Answer 2

你可以通过这个公式找到 ClientX , ClientY

  var clientX = pageX- document.documentElement.scrollLeft;
  var clientY = pageY- document.documentElement.scrollTop;

下图显示了页面 x/y 和客户端 x/y 是如何相互关联的