Question

我正在尝试获取图像上框的坐标。坐标应基于图像本身，而不是屏幕尺寸。我当前正在使用getBoundingClientRect()。如何根据图像（框处于打开状态而不是窗口大小）检索坐标？

我尝试过的代码：

var rect = div[index].getBoundingClientRect();

我在SO How to get xy coordinates of child element from parent element in jquery?上找到了这篇文章，但那是7年前了...

Answer 1

您将使用元素位置与其容器位置之间的差。我已经像您尝试过的那样使用getBoundingClientRect and returned a new DomRect，但请注意，因为目前不支持Internet Expolorer，Edge或Safari。

const getBoundingClientRect_RelativeToParent = element => {
  const domRect = element.getBoundingClientRect(),
    parentDomRect = element.parentElement.getBoundingClientRect()

  return new DOMRect(domRect.left - parentDomRect.left, domRect.top - parentDomRect.top, domRect.width, domRect.height)
}

console.log(getBoundingClientRect_RelativeToParent(document.querySelector(".child")))

.parent {
  width: 500px;
  height: 300px;
  margin-left: 200px;
  margin-top: 200px;
  padding-left: 30px;
  padding-top: 30px;
  background: green;
}

.child {
  width: 100px;
  height: 50px;
  background: red
}

body {
  background: blue
}

<div class="parent">
  <div class="child">
  </div>
</div>

如何从元素的顶部到容器获取元素的坐标？

我尝试过的代码：

1 个答案: