위 이미지 중 첫 번째 이미지는 브라우저에 표시되는 요소의 예이며 각 css 속성을 나타냅니다. 두 번째 이미지는 js의 크기 및 위치와 관련된 속성을 보여줍니다.
js에서 요소의 크기와 위치를 나타내는 각 속성을 정렬하기 전에 offsetParent에 대해 알아야 합니다. offsetParent는 offsetTop 및 offsetLeft와 같은 속성이 계산되는 기준이 될 수 있는 가장 가까운 조상 요소이며 아래 세 가지 기준 중 하나에 속합니다.
- CSS 위치 재산 절대 또는 상대적인, 결정된, 고정된 가장 가까운 조상 요소
-
또는 또는 1. 크기
1) offsetWidth, offsetHeight: 테두리를 포함한 가장 바깥쪽 너비와 높이
2) clientTop, clientLeft: 상단 및 왼쪽 테두리의 두께
3) clientWidth, clientLeft: 스크롤바와 보더를 포함하지 않는 컨텐츠 영역의 너비와 높이(이 때 패딩 영역이 포함되며, 스크롤바의 경우 컨텐츠를 침범하면서 생성됨 따라서 스크롤바가 존재하는 경우 css 설정 값인 스크롤바 폭(16px)이 차감됩니다.)
4) scrollWidth, scrollHeight: clientWidth 및 Height와 유사하지만 숨겨진 영역의 크기를 포함합니다.
2. 좌표
1) offsetTop, offsetLeft: offsetParent를 기준으로 요소가 오른쪽 아래로 얼마나 떨어져 있는지를 나타냅니다. position:absoulte가 css에 설정되어 있으면 top, left로 볼 수 있습니다.
2) scrollTop, scrollLeft: 스크롤이 차지하는 영역의 너비와 높이(아래 이미지 참조). 이 속성은 변경 가능하며 스크롤바 이동을 구현할 수 있습니다.
