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

Question

是否可以使用DOM api将pageX，pageY翻译为clientX，clientY？

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

Answer 1

您可以通过此公式找到ClientX，ClientY

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

下图显示了页面x / y和客户端x / y如何相对于彼此

Answer 2

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

  

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

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