[JavaScript] DOM Element 위치값 가져오기

 

jQuery없이 JS로 슬라이더를 만들던 중 getBoundingClientRect()를 발견했다.

DOMRect의 오브젝트를 긁어오는 메소드인데 console로 찍으면 다음과 같이 나온다.

 

console.log(SLIDE_SIZE);

// 출력 결과(firefox)
DOMRect { 
  x: 488.5, 
  y: 120, 
  width: 300, 
  height: 237.88333129882812, 
  top: 120, 
  right: 788.5, 
  bottom: 357.8833312988281, 
  left: 488.5 
}

x, y 좌표값과 해당 엘레먼트의 width, height값 그리고 상하좌우 값도 나온다!

 

 

getBoundingClientRect()

IE에서 x, y값을 얻지 못하는 것을 제외하고(역시 IE...) 대부분의 브라우저에서 호환이 된다.

getBoundingClientRect()로 절대좌표, 상대좌표를 구하는 글도 봤는데 나중에 다시 정리해봐야겠다.

DOM.getBoundingClientRect()

 

 

 

참고: https://mommoo.tistory.com/85