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

我找到了这段代码，但我不确定我应该在哪里键入它，或者如何修改它以找到每个按钮的位置。此外，结果坐标显示在哪里

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

谢谢。

您可以使用document.queryselect或all'button'获取网页上所有按钮的列表。现在，您可以将坐标存储在任何需要的地方，它们将从函数返回，但出于演示目的，我将只将它们记录到控制台

此外，您还可以通过利用来大大简化定位逻辑，它返回一个DOMRect，其中包含预计算的左属性和右属性x和y，在某些浏览器中也可以使用，但在Chrome中不受支持：

函数findPosition元素{ var rect=element.getBoundingClientRect 返回{x:rect.left，y:rect.top} } var allCoordinates=[].map.calldocument.querySelectorAll'button'，findPosition console.logallCoordinates .作为控制台包装{最小高度：100%；} 第一个按钮 第二个按钮 第三个按钮 函数getOffset-el{ var x=0； var _y=0； 而el&&！isNaN el.offsetLeft&&！isNaN el.offsetTop{ _x+=el.offsetLeft-el.scrollLeft； _y+=el.offsetTop-el.scrollTop； el=el.offsetParent； } 返回{top:_y，left:_x}； } var elements=document.queryselectoral'button'； var elementsLen=elements.length； forvar i=0；我你可以简单地得到你网页上任何元素的x和y坐标，就像

<label for="x">X: </label><input type="text" name="x" id="x">
<label for="y">Y: </label><input type="text" name="y" id="y">
<button id="btn1">Click to get my coordinates</button>

<script>
var x = document.getElementById("x"),
    y = document.getElementById("y");

var btn1 = document.getElementById("btn1");
btn1.addEventListener("click", function() {
    x.value = btn1.offsetLeft;
    y.value = btn1.offsetTop;
});
</script>

---

示例：

看起来您的结果返回时未定义。Chrome中似乎不支持x和y。我猜这就是你正在使用的浏览器；我更新了示例，改为使用受更好支持的left和top属性。您想要的是button元素还是input type button？OP的findPos函数更合适。这似乎并没有回答问题：…找到每个按钮的位置。我知道在我的示例中，它并没有找到所有元素的坐标，尽管我认为最好展示如何为一个元素执行此操作，并让他们根据自己的需要修改/使用它。你认为呢？OP已经有了一个非常相似的定位功能，但它们都不是特别好，因为它们不允许滚动。您的答案也不允许父元素偏移，因此您的答案不会向OP已经知道的内容添加任何内容。