[jQuery] jQuery(제이쿼리) 요소의 넓이, 높이 - .with(), .height() 함수

 

 

제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소의 넓이와 높이를 값을 설정하거나 넓이, 높이 값을 가져올수가 있습니다. 요소(element)의 크기의 영향을 미치는 구성에는 내부의 여백인 padding, 외부의 여백인 margin, 그리고 테두리 선인 border이 있는데, 이 3가지가 요소(element)가 넓이와 높이 값에 영향을 주게 됩니다.

 

출처 : devkuma.com

 

jQuery(제이쿼리)의 요소(element)의 높이 측정구하기

jQuery(제이쿼리)로 요소(element)의 높이를 측정하는 방법은 요소(element)의 크기의 영향을 미치는 구성에 따라서 4가지 방법이 있습니다. 여기서 주의할 점은 Javascript(자바스크립트)와 jQuery(제이쿼리)의 높이 구하는 방법은 달라서 헷갈리지 말아야 합니다.

//jQuery의 높이 구하기 
$(select).height();             //요소(element)의 높이 
$(select).innerHeight();        //요소(element)의 padding을 포함한 높이
$(select).outerHeight();        //요소(element)의 border, padding을 포함한 높이
$(select).outerHeight(true);    //요소(element)의 margin, border, padding을 포함한 높이
$(select).height(val);          //요소(element)의 높이를 설정함

//Javascript의 높이 구하기
var element = document.getElementById('test');
element.clientHeight();         //padding을 포함한 높이
element.scrollHeight();         //padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 높이
element.offsetHeight();         //border, padding, 스크롤 바를 포함한 높이

//윈도우 사이즈 높이 구하기
window.innerHeight();           //스크롤바를 포함하지 않는 윈도우 창 높이
window.outerHeight();           //스크롤바를 포함한 윈도우 창 높이

 

만약에 선택되는 요소(element)의 설정이 display:none 일 경우에 높이 사이즈를 구할 수 있는 경우와 구할 수 없는 경우가 있습니다.

//요소(element)의 설정이 display:none 일 경우 구할수 없는경우
var element = document.getElementById('test');
element.clientHeight();         //padding을 포함한 높이
element.offsetHeight();         //border, padding, 스크롤 바를 포함한 높이

//요소(element)의 설정이 display:none 일 경우 구할수 있는경우
$(select).height();             //요소(element)의 높이 
window.innerHeight();           //스크롤바를 포함하지 않는 윈도우 창 높이
window.outerHeight();           //스크롤바를 포함한 윈도우 창 높이

 

jQuery(제이쿼리)의 요소(element)의 넓이 측정구하기

jQuery(제이쿼리)로 요소(element)의 넓이를 측정하는 방법 또한 높이를 구하는 방법과 같이 4가지 방법이 있습니다.

//jQuery의 높이 구하기 
$(select).width();             //요소(element)의 넓이 
$(select).innerWidth();        //요소(element)의 padding을 포함한 넓이 
$(select).outerWidth();        //요소(element)의 border, padding을 포함한 넓이 
$(select).outerWidth(true);    //요소(element)의 margin, border, padding을 포함한 넓이 
$(select).Width(val);          //요소(element)의 넓이를 설정함

//Javascript의 높이 구하기
var element = document.getElementById('test');
element.clientWidth();         //padding을 포함한 넓이 
element.scrollWidth();         //padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 넓이 
element.offsetWidth();         //border, padding, 스크롤 바를 포함한 넓이 

//윈도우 사이즈 높이 구하기
window.innerWidth();           //스크롤바를 포함하지 않는 윈도우 창 넓이 
window.outerWidth();           //스크롤바를 포함한 윈도우 창 넓이