Post
Javascript 나 jQuery 에서 지금도 높이, 너비 구할 때 아직도 헷갈릴 때가 있다.
그래서 다음과 같이 정리해 본다.
JavaScript에서 요소의 크기 구하기
1 2 3 | var element = document.getElementById('content'); var h = element.clientHeight; var w = element.clientWidth; | cs |
높이
- clientHeight : padding을 포함한 높이
- scrollHeight : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 높이
- offsetHeight : border, padding, 스크롤 바를 포함한 높이
너비
- clientWidth : padding을 포함한 폭
- scrollWidth : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 폭
- offsetWidth : border, padding, 스크롤 바를 포함한 폭
윈도우 사이즈
window.innerWidth : 스크롤 바를 포함하지 않는 창 너비
window.innerHeight : 스크롤 바를 포함하지 않은 창 높이
window.outerWidth : 스크롤 바를 포함, 창의 너비
window.outerHeight : 스크롤 바를 포함한 창의 높이
jQuery에서 요소의 크기 구하기
높이
- .height() : 요소 높이만
- .innerHeight() : 요소의 padding을 포함한 높이
- .outerHeight() : 요소의 border, padding 포함한 높이
- .outerHeight(true) : 요소의 margin, border, padding 포함한 높이
너비
- .width() : 요소의 폭만
- .innerWidth() : 요소의 padding을 포함한 폭
- .outerWidth() : 요소의 border, padding을 포함한 폭
- .outerWidth(true) : 요소의 margin, border, padding을 포함한 폭
만약 요소의 display:none; 일 때 높이 사이즈 취득 여부
구할 수 없는 것 | 구할 수 있는 것 |
offsetHeight | height |
clientHeight | innerHeight |
outerHeight |
'javascript, jQuery' 카테고리의 다른 글
다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과 (0) | 2019.04.09 |
---|---|
INPUT TYPE FILE 파일명 추출 (0) | 2019.04.09 |
video태그 제어 (0) | 2018.12.05 |
타이머 스크립트 (0) | 2018.08.21 |
select 제어 (0) | 2018.08.05 |