웹프로그래밍

Global It Leader!!


jQuery


 
 

JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리

페이지 정보

작성자 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 867회 작성일 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

댓글목록

등록된 댓글이 없습니다.

전체 148
게시물 검색
jQuery 목록
번호 제목 글쓴이 조회 날짜
148 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 62 11-08
147 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 81 07-31
146 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 80 06-20
145 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 78 06-20
144 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 93 06-05
143 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 89 06-05
142 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 556 07-06
141 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 752 01-05
열람중 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 868 12-07
139 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1368 03-31
138 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1397 03-28
137 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1384 03-27
136 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2049 03-27
135 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1346 03-27
134 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1416 03-27
133 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1720 03-26
132 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1370 03-26
131 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1571 03-26
130 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3070 03-26
129 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2055 03-26