반응형
웹페이지, 또는 요소의 높이값 정보를 얻는 속성은 대표적으로 clientHeight와 offsetHeight, scrollHeight가 있습니다.
세 속성은 어떤 경우에는 값은 높이값을 표시하지만, 어떤 경우에는 다른 높이값을 표시합니다.
각 속성이 표시하는 높이 값의 의미는 다음과 같습니다.
- clientHeight 는 요소의 내부 높이입니다. 패딩 값은 포함되며, 스크롤바, 테두리, 마진은 제외됩니다.
- offsetHeight 는 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함됩니다. 마진은 제외됩니다.
- scrollHeight 는 요소에 들어있는 컨텐츠의 전체 높이입니다. 패딩과 테두리가 포함됩니다. 마진은 제외됩니다.
그림으로 표현하면 다음과 같습니다.
세속성 모두 정수값으로 표현되며, 마진값은 공통적으로 제외됩니다.
offsetHeight 은 CSS로 요소의 높이를 지정할 때 정해지는 높이입니다.
패딩과 테두리가 포함되며, "box-sizing" 모델 속성 값에 따라 패딩과 테두리 값이 제외될 수 있으므로 주의해야 합니다.
요소가 감춤 상태인 경우 offsetHeight는 0을 반환합니다.
반응형
'Javascript > DOM과 HTML 제어' 카테고리의 다른 글
| scrollHeight, clientHeight, offsetHeight 의 차이 (0) | 2020.06.12 |
|---|---|
| DOM 노드의 생성, 수정, 삭제 기초 (0) | 2020.06.07 |
| DOM 노드와 속성의 이해 (0) | 2020.06.07 |
| 문서 객체 모델(DOM)과 노드, 그리고 태그의 이해 (0) | 2020.06.07 |
| DOM 이벤트 기초 (0) | 2020.06.07 |
| 이벤트 캡쳐링(Capturing)과 버블링(Bubbling)의 이해 (0) | 2020.06.07 |
| DOM 엘리먼트 노드의 CSS 관리 (0) | 2020.06.07 |
| JSON 데이터로 HTML 내용 추가하기 (0) | 2020.06.07 |
| 이벤트 타입과 속성의 이해 (0) | 2020.06.07 |
