查找字段的窗口坐标 - JavaScript 中文教程

返回课程

在下面的 iframe 中，您可以看到一个带有绿色“字段”的文档。

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

文档中实现了一个小功能以方便使用。单击任何位置都会显示那里的坐标。

您的代码应该使用 DOM 获取以下内容的窗口坐标：

左上角，外角（很简单）。
右下角，外角（也很简单）。
左上角，内角（有点难）。
右下角，内角（有几种方法，选择一种）。

您计算的坐标应该与鼠标点击返回的坐标相同。

附注：即使元素具有其他大小或边框，代码也应该正常工作，不受任何固定值的限制。

打开一个沙盒进行此任务。

外角

外角基本上是我们从 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];

右下角内角

在本例中，我们需要从外角坐标中减去边框大小。

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

在沙盒中打开解决方案。