jQuery에서 벗어나 바닐라 JS를 공부하면서(참고) 정말 낯설었던 부분 중 하나를 꼽으라면 DOM 엘리먼트들을 다루는 Web API가 아니었나 싶다. 특히, DOM 엘리먼트의 크기나 위치와 관련된 정보를 참조하는 Web API들이 익숙하지 않아서 매번 MDN을 방문하지 않을 수 없었다. 그런데 계속 사용하다 보니 매번 찾았던 것만 또 찾는 것 같아서, 이번 기회에 자주 사용되는 DOM 엘리먼트의 크기 및 위치 관련 Web API들을 깔끔하게 정리해보기로 하였다. 잘 검색하는 것도 중요하지만 자주 사용되고 헷갈리는 부분은 한 번 직접 정리해서 나만의 것으로 만드는 것이 중요하다고 생각했기 때문이다.
우선, 본 포스팅의 내용을 사진 두 장으로 요약하자면 다음과 같다. 각 API에 대한 설명은 사진 하단에서 글로 보충한다.
1. Window 인터페이스 Web API
1) Window.innerWidth / Window.innerHeight
• 브라우저 창의 내부 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.
• 스크롤바가 존재한다면 그것까지 포함한다.
• 조금 더 정확하게는, 브라우저 창의 뷰포트의 너비/높이를 의미한다.
2) Window.outerWidth / Window.outerHeight
• 브라우저 창의 외부 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.
3) Window.scrollX (또는 Window.pageXOffset)
• 웹 페이지가 수평 방향으로 얼마나 스크롤되었는지를 픽셀로 반환하는 읽기 전용 프로퍼티이다.
• 조금 더 정확하게는, 브라우저 창의 뷰포트의 왼쪽 모서리의 X 좌표를 의미한다.
• 렌더링 하는 장치의 정밀도에 따라 정수를 반환할 수도, 실수를 반환할 수도 있다.
• Window.pageXOffset은 Window.scrollX의 또 다른 이름(= 별칭)이다. 즉 둘의 값은 항상 같다.
• 브라우저 호환성을 위해서는 Window.pageXOffset을 사용하는 것이 권장된다.
4) Window.scrollY (또는 Window.pageYOffset)
• 웹 페이지가 수직 방향으로 얼마나 스크롤되었는지를 픽셀로 반환하는 읽기 전용 프로퍼티이다.
• 조금 더 정확하게는, 브라우저 창의 뷰포트의 위쪽 모서리의 Y 좌표를 의미한다.
• 렌더링 하는 장치의 정밀도에 따라 정수를 반환할 수도, 실수를 반환할 수도 있다.
• Window.pageYOffset은 Window.scrollY의 또 다른 이름(= 별칭)이다. 즉 둘의 값은 항상 같다.
• 브라우저 호환성을 위해서는 Window.pageYOffset을 사용하는 것이 권장된다.
2. Element 인터페이스 Web API
1) Element.getBoundingClientRect()
• 해당 엘리먼트의 크기 정보와 뷰포트에 대한 상대적 위치 정보를 담고 있는 DOMRect 타입의 객체를 반환한다.
• domRect = element.getBoundingClientRect();
• domRect.width / domRect.height : 해당 엘리먼트의 너비/높이 (Padding과 Border 포함)
• domRect.x (또는 domRect.left) : 뷰포트 기준 왼쪽 모서리의 X 좌표 (브라우저 호환성을 위해 domRect.left 사용 권장)
• domRect.y (또는 domRect.top) : 뷰포트 기준 위쪽 모서리의 Y 좌표 (브라우저 호환성을 위해 domRect.top 사용 권장)
• domRect.right : 뷰포트 기준 오른쪽 모서리의 X 좌표
• domRect.bottom : 뷰포트 기준 아래쪽 모서리의 Y 좌표
* Window.pageXOffset 혹은 Window.pageYOffset과 Element.getBoundingClientRect()를 함께 사용하면 특정 엘리먼트의 절대 좌표를 얻어내는 것도 가능하다. 예를 들어, (domRect.top + window.pageYOffset)은 해당 엘리먼트의 절대적인 Y 좌표를 의미한다.
2) Element.style.width / Element.style.height
• 해당 엘리먼트의 CSS width/height 프로퍼티에 설정된 값을 반환하는 프로퍼티이다.
• 기본적으로는 Padding과 Border를 포함하지 않는다.
• 그러나 CSS box-sizing 프로퍼티의 값이 border-box라면 Padding과 Border를 포함한다.
3) Element.clientWidth / Element.clientHeight
• 해당 엘리먼트의 Padding을 포함하는 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다. (스크롤바 제외)
• 인라인 엘리먼트나 CSS가 적용되지 않은 엘리먼트는 0을 반환한다.
4) Element.scrollWidth / Element.scrollHeight
• 해당 엘리먼트의 Padding과 넘친 스크롤 영역을 포함하는 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.
• Element.scrollLeft : 해당 엘리먼트가 수평 방향으로 얼마나 스크롤되었는지를 정수 픽셀로 반환하는 프로퍼티이다.
• Element.scrollTop : 해당 엘리먼트가 수직 방향으로 얼마나 스크롤되었는지를 정수 픽셀로 반환하는 프로퍼티이다.
5) Element.offsetWidth / Element.offsetHeight
• 해당 엘리먼트의 Padding과 Border를 포함하는 너비/높이를 정수 픽셀로 반환하는 읽기 전용 프로퍼티이다.
• 해당 엘리먼트 혹은 부모 엘리먼트의 CSS display 프로퍼티 값이 none이라면 0을 반환한다.
'자바스크립트 (JavaScript)' 카테고리의 다른 글
[JavaScript] 반복 가능 객체 (Iterable object), 유사 배열 객체 (Array-like object) (0) | 2021.05.16 |
---|---|
[JavaScript] 비동기 프로그래밍 (async, await) + 동작 원리 (2) | 2021.05.15 |
[JavaScript] 정규 표현식(정규식) 사용하기 (2) | 2021.03.03 |
[JavaScript] HTML5 History API, history 패키지 (feat. react-router-dom) (0) | 2020.11.10 |
[JavaScript] package.json, package-lock.json (0) | 2020.08.27 |