웹 페이지의 모든 버튼 좌표는 어떻게 찾습니까?

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')을 사용하면 웹 페이지의 모든 버튼 목록을 얻을 수 있습니다. 원하는 좌표 (현재 함수에서 반환되는 좌표)를 저장할 수 있지만 데모 용으로는 콘솔에 로그 만 저장합니다.

또한 크게 미리 계산 left 및 top 특성을 가진 DOMRect을 반환 getBoundingClientRect(), 활용하여 위치 찾는 논리를 단순화 할 수 있습니다 (너무 x 및 일부 브라우저의 경우,에서 y 작업을하지만, 크롬에서 지원되지 않습니다) :

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>

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/