JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리
페이지 정보
작성자
운영자쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 866회
작성일 22-12-07 18:05
본문
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 |
관련링크
- https://bonggugu.tistory.com/35 495회 연결
댓글목록
등록된 댓글이 없습니다.