[ JS ] 요소의 좌표

 

  요소의 좌표는 창 기준(client), 문서 기준(page) 이 두 기준을 따라 계산됩니다. 즉 문서 기준인 pageX, pageY는 스크롤에 영향받지 않지만 clientX, clientY는 스크롤에 따라 그 값이 변경됩니다.

 

요소의 좌표 얻기

 

 

  요소의 좌표는 element.getBoundingClientRect()를 통해 얻는 DOMRect 클래스의 인스턴스를 통해 얻을 수 있습니다. DOMRect의 주요 프로퍼티는 아래와 같습니다.

• x와 y – 요소를 감싸는 네모의 창 기준 X, Y 좌표
• width와 height – 요소를 감싸는 네모의 너비, 높이(음수도 가능)

아래는 파생 프로퍼티입니다.

• top과 bottom – 요소를 감싸는 네모의 위쪽 모서리, 아래쪽 모서리의 Y 좌표
• left와 right – 요소를 감싸는 네모의 왼쪽 모서리, 오른쪽 모서리의 X 좌표

즉, 

• left = x
• top = y
• right = x + width
• bottom = y + height

 

 

elementFromPoint(x,y) - 고정된 좌표의 요소 얻기

  document.elementFromoPoint(x, y) 호출 시 창 기준 좌표 (x, y)에 가장 가까운 중첩 요소를 반환합니다. 즉 아래와 같은 코드로 창 정중앙에 위치한 태그를 반환받을 수 있습니다.

 

let centerX = document.documentElement.clientWidth / 2;
let centerY = document.documentElement.clientHeight / 2;

let elem = document.elementFromPoint(centerX, centerY);