자바스크립트 요소의 width값, height값 구하기

offsetWidth,clientWidth,scrollWidth

자바스크립트로 특정 요소의 width,height 값을 구하고 싶을 때 사용 할 수 있는 방법이 있다.

offsetWidth

offsetWidth는 요소의 마진을 제외한 border까지의 사이즈를 계산한다.

 

clientWidth

clientWidth는 요소의 border를 제외한 padding까지의 사이즈를 계산한다.

 

scrollWidth

scrollWidth는 요소의 보이는것과 상관 없이 실제 컨텐츠 영역이 얼마의 크기를 갖는지 계산한다.

이 요소는 스크롤 바로 인해 숨겨진 영역까지 포함한 크기를 계산한다.

 

var width = document.jquerySelector(".classname").clientWidth;
console.log(width);

classname요소의 width값이 콘솔창에 표시된다.

height값을 구하고자 할때에는 Width대신 Height를 쓰면 된다.