웹프로그래밍

Global It Leader!!


jQuery


 
 

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

페이지 정보

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

댓글목록

등록된 댓글이 없습니다.

전체 142
게시물 검색
jQuery 목록
번호 제목 글쓴이 조회 날짜
142 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 389 07-06
141 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 618 01-05
열람중 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 706 12-07
139 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1230 03-31
138 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1237 03-28
137 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1225 03-27
136 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1652 03-27
135 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1217 03-27
134 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1253 03-27
133 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1526 03-26
132 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1239 03-26
131 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1387 03-26
130 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2664 03-26
129 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1867 03-26
128 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1428 03-26
127 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1609 03-26
126 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1857 03-26
125 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1255 03-26
124 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1189 03-26
123 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1348 03-26