JS/jQuery - 요소의 높이(height), 넓이(width)

닌니디자인 JS 썸네일

요소의 높이(height)와 넓이(width)

속성에 따라 높이값과 너비값을 가져오는 방법이 조금씩 다르다. 바닐라 스크립트와 제이쿼리로 가져오는 방법 또한 다르기 때문에 상황에 따라 알맞는 속성을 사용할 수 있다. 

 

 

요소의 내부, padding, border, margin 영역

 

바닐라스크립트

// 높이값 가져오기
let clientH = element.clientHeight;
let offsetH = element.offsetHeight;
let scrollH = element.scrollHeight;
let rectH = element.getBoundingClientRect().height;
let styleH = window.getComputedStyle(element).height;
 
 
// 넓이값 가져오기
let clientW = element.clientWidth;
let offsetW = element.offsetWidth;
let scrollW = element.scrollWidth;
let rectW = element.getBoundingClientRect().width;
let styleW = window.getComputedStyle(element).width;

 

높이값(height) 속성

clientHeight	요소의 padding을 포함한 내부 높이
offsetHeight	요소의 padding과 border를 포함한 내부 높이
scrollHeight	요소의 padding + 요소안의 숨겨진 스크롤 영역까지 포함한 내부 높이
getBoundingClientRect().height	최종 랜더링 된 높이
getComputedStyle(element).height	css에 선언된 높이

 

너비값(width) 속성

clientWidth	요소의 padding을 포함한 내부 너비
offsetWidth	요소의 padding과 border를 포함한 내부 너비
scrollWidth	요소의 padding + 요소안의 숨겨진 스크롤 영역까지 포함한 내부 너비
getBoundingClientRect().width	최종 랜더링 된 너비
getComputedStyle(element).width	css에 선언된 너비

 

 

 

---

 

제이쿼리

// 높이값 가져오기
let eleH = $(element).height();
let innerH = $(element).innerHeight();
let outerH = $(element).outerHeight();
let trueH = $(element).outerHeight(true);
let styleH = $(element).css('height');
 
 
// 넓이값 가져오기
let eleW = $(element).width();
let innerW = $(element).innerWidth();
let outerW = $(element).outerWidth();
let trueW = $(element).outerWidth(true);
let styleW = $(element).css('Width');

 

높이값(height) 속성

height()	요소의 내부 높이
innerHeight()	요소의 padding을 포함한 내부 높이
outerHeight()	요소의 padding과 border를 포함한 내부 높이
outerHeight(true)	요소의 padding과 border와 margin을 포함한 내부 높이
css('height')	css에 선언된 높이

 

너비값(width) 속성

width()	요소의 내부 너비
innerWidth()	요소의 padding을 포함한 내부 너비
outerWidth()	요소의 padding과 border를 포함한 내부 너비
outerWidth(true)	요소의 padding과 border와 margin을 포함한 내부 너비
css('width')	css에 선언된 너비