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()来大大简化您的定位逻辑，{{3}}会返回具有预先计算的left和top属性（x和{{1}的DOMRect也可以在某些浏览器中工作，但在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%; }

Answer 2

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

var elements = document.querySelectorAll('button');
var elementsLen = elements.length;

for(var i=0; i<elementsLen; i++) {

  var x = getOffset( elements[i] ).left; 
  var y = getOffset( elements[i] ).top; 
  console.log('Position x :' +x);
  console.log('Position y:' +y);

}

#some_id_2 {
  position:absolute;
  left:80px;
  top:45px;
}

<button id="some_id_1">Some button</button>
<button id="some_id_2">Some other button</button>

Answer 3

您只需获取网页上任何元素的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>

示例：https://jsfiddle.net/cte52ta1/

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

3 个答案: