回到课程

查找 field 的窗口坐标

重要程度: 5

在下面的 iframe 中你可以看到一个带有绿色 ”field“ 元素的文档。

使用 JavaScript 来找到箭头指向角落的坐标。

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

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

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

你计算得到的坐标应该和鼠标单击返回的坐标相同。

附:如果元素有其他大小和边框,并且没有绑定到任何固定的值这代码也应该起作用。

打开一个任务沙箱。

外角

外角坐标基本上就是我们从 elem.getBoundingClientRect() 方法获取的值。

Coordinates of the upper-left corner answer1 and the bottom-right corner answer2: 左上角坐标的答案是 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];

右下内角坐标

在这个情况下我们需要把外部坐标减去边框大小。

我们可以使用 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
];

使用沙箱打开解决方案。