回到课程

查找区域的窗口坐标

重要程度: 5

在下面的 iframe 中,你可以看到一个带有绿色区域(field)的文档。

使用 JavaScript 查找带箭头指向的角的窗口坐标。

为了方便起见,已经在文档中实现了一个小功能。在任何地方点击都会显示那里的坐标。

你的代码应该使用 DOM 来获取以下窗口坐标:

  1. 左上的外角(这很简单)。
  2. 右下的外角(也挺简单)。
  3. 左上的内角(这有点难)。
  4. 右下的内角(有几种方式,选择其中一种)。

你计算得到的坐标,应该与点击鼠标返回的坐标相同。

P.S. 如果元素具有其他大小(size)和边框(border),且未绑定任何固定的值,你写的代码也应该起作用。

打开一个任务沙箱。

外角

外角就是我们从 elem.getBoundingClientRect() 获取的。

answer1 为左上角的坐标,answer2 为右下角的坐标:

let coords = elem.getBoundingClientRect();

let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];

左上的内角坐标

内角与外角主要的不同在于边框的宽度。一种获取距离的可靠的方法是 clientLeft/clientTop

let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];

右下的内角坐标

在我们的例子中,我们需要把外部坐标减去边框(border)大小。

我们可以使用 CSS 的方式:

let answer4 = [
  coords.right - parseInt(getComputedStyle(field).borderRightWidth),
  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];

另一种方式是把 clientWidth/clientHeight 和左上角的坐标相加。这个方式相较于上一个或许更好:

let answer4 = [
  coords.left + elem.clientLeft + elem.clientWidth,
  coords.top + elem.clientTop + elem.clientHeight
];

使用沙箱打开解决方案。