자바스크립트를 사용하여 웹에서 다양한 인터랙션을 개발할 때 요소의 위치값이나, 너비나 높이값등을 가져와야 할 때가 많다. 이때 자바스크립트에서 제공하는 다양한 메소드들이 있는데, 종류별로 정리해보았다.
1. 요소의 크기 측정
- element.clientWidth: 요소의 내부 너비 (패딩 포함, 스크롤바/테두리/마진 제외)
- element.clientHeight: 요소의 내부 높이 (패딩 포함, 스크롤바/테두리/마진 제외)
- element.scrollWidth: 요소의 전체 콘텐츠 너비 (보이지 않는 영역 포함)
- element.scrollHeight: 요소의 전체 콘텐츠 높이 (보이지 않는 영역 포함)
- element.offsetWidth: 요소의 전체 너비 (패딩 + 테두리 + 콘텐츠, 마진 제외)
- element.offsetHeight: 요소의 전체 높이 (패딩 + 테두리 + 콘텐츠, 마진 제외)
2. 요소의 위치 측정
- element.offsetLeft: 부모 요소(offsetParent)에서의 왼쪽 오프셋
- element.offsetTop: 부모 요소(offsetParent)에서의 위쪽 오프셋
- element.offsetParent: 기준이 되는 부모 요소 (position이 static이 아닌 가장 가까운 부모)
- element.getBoundingClientRect(): 요소의 크기와 뷰포트 상대 위치 정보를 담은 객체 반환
- left: 뷰포트 왼쪽 경계에서의 거리
- top: 뷰포트 위쪽 경계에서의 거리
- right: 뷰포트 왼쪽 경계에서 요소의 오른쪽 경계까지의 거리
- bottom: 뷰포트 위쪽 경계에서 요소의 아래쪽 경계까지의 거리
- width: 요소의 너비 (테두리 포함)
- height: 요소의 높이 (테두리 포함)
- x: left와 동일
- y: top과 동일
예를 들어 스크롤 할 때 마다 요소가 나타나는 스크롤 이벤트를 만들 때,
getBoundingClientRect와 스크롤값을 같이 사용해서 절대 위치를 계산해서 사용할 수 있다.
const absoluteTop = window.scrollY + element.getBoundingClientRect().top;
getBoundingClientRect().top;은 뷰포트 기준으로 상대 위치를 가져오는데, 여기에 스크롤값을 더해주면
문서 최상단에서부터 요소의 위치를 계산할 수 있게 된다.
3. 스크롤 관련 메소드
- element.scrollLeft: 요소가 수평으로 스크롤된 픽셀 수 (읽기/쓰기 가능)
- element.scrollTop: 요소가 수직으로 스크롤된 픽셀 수 (읽기/쓰기 가능)
4. 뷰포트 및 문서 관련 메소드
- window.innerWidth: 브라우저 뷰포트의 내부 너비 (스크롤바 포함)
- window.innerHeight: 브라우저 뷰포트의 내부 높이 (스크롤바 포함)
- document.documentElement.clientWidth: 뷰포트 너비 (스크롤바 제외)
- document.documentElement.clientHeight: 뷰포트 높이 (스크롤바 제외)
- document.documentElement.scrollWidth: 문서 전체의 너비
- document.documentElement.scrollHeight: 문서 전체의 높이
- window.scrollX 또는 window.pageXOffset: 문서가 수평으로 스크롤된 픽셀 수
- window.scrollY 또는 window.pageYOffset: 문서가 수직으로 스크롤된 픽셀 수