[컴] DOM 에서 제공되는 좌표값(Web API 에서 제공되는 좌표값)

 html 좌표 / 정보 / 좌표정보

DOM 에서 제공되는 좌표값(Web API 에서 제공되는 좌표값)

HTMLElement.offsetTop

현재 element의 outer border와 ‘가장가까운 parent element’(offsetParent) node 의 inner border top에 대한 상대적인 거리

pageY, clientY

ref 3. 에서 pageY 와 clientY 의 차이를 볼 수 있다. 간략하게 설명하면, pageY 는 전체 page 에 대한 좌표이고, clientY 는 browser 내에서의 좌표이다.

Element.getBoundingClientRect().y

pageY 와 clientY 는 둘다 MouseEvent 이다.

그래서 mouse 를 써서 event 를 발생시키지 않을때 이 값을 얻으려면

Element.getBoundingClientRect() 를 사용해서 DOMRect 를 얻는다. 이 DOMRect 는 element 의 size 정보와 element 의 viewport 에서의 상대적인 좌표를 제공하는 object 이다.

References

1. HTMLElement.offsetTop - Web APIs | MDN
2. Element.getBoundingClientRect() - Web APIs | MDN
3. javascript - What is the difference between screenX/Y, clientX/Y and pageX/Y? - Stack Overflow