javascript - 如何找到任何网页上每个按钮的坐标？

Question

我找到了这段代码，但我不确定应该在哪里输入它，也不知道如何修改它以找到每个按钮的位置。另外，结果(坐标)显示在哪里？

function findPos(obj){
var curleft = 0;
var curtop = 0;

if (obj.offsetParent) {
do {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
   } while (obj = obj.offsetParent);

return {X:curleft,Y:curtop};
}
}

谢谢。

Answer 1

您可以使用document.querySelectorAll('button')来获取网页上所有按钮的列表。您可以将坐标存储在任何您想要的位置(现在它们正在从您的函数返回)，但出于演示目的，我将它们记录到控制台。

此外，您还可以利用 getBoundingClientRect() 大大简化您的定位逻辑。 ，它返回一个带有预先计算的 left 和 top 属性的 DOMRect (x 和 y 也适用于某些浏览器，但 Chrome 不支持):

function findPosition (element) {
  var rect = element.getBoundingClientRect()
  return {x: rect.left, y: rect.top }
}

var allCoordinates = [].map.call(document.querySelectorAll('button'), findPosition)

console.log(allCoordinates)

.as-console-wrapper { min-height: 100%; }

<button>First Button</button>
<button>Second Button</button>
<button>Third Button</button>