查找区域的窗口坐标

回到课程

在下面的 iframe 中，你可以看到一个带有绿色区域（field）的文档。

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

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

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

左上的外角（这很简单）。
右下的外角（也挺简单）。
左上的内角（这有点难）。
右下的内角（有几种方式，选择其中一种）。

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

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
];
        

使用沙箱打开解决方案。