[jQuery] 객체 크기값 가져오기 - width, innerWidth, outerWidth, height, innerHeight, outerHeight

jQuery를 사용할때 어떠한 객체의 크기값을 가져오기 위해 아래와 같은 방법을 사용한다.

$('.box').width(); // box 클래스의 가로크기 값을 가져온다
$('.box').height(); // box 클래스의 세로크기 값을 가져온다

하지만 위에서의 값을 가져오는 방법의 문제점은
객체에 padding값이나 border값이 있다면 그것을 제외한 순수 가로,세로값을 가져오기 때문에
실제의 크기값을 가져오지는 못한다.

예를 들어

 

border:1px padding:10px width:100px
height:100px

.box{ width:100px; height:100px; border:1px solid #000; padding:10px;} 

위와 같이 box 클래스를 가진 객체의 실제 width 값은 122px 이다. height 값도 마찮가지다.

border값을 제외하고 나머지 width나 height값을 가져오고 싶다면 아래와 같이 실행한다.

$('.box').innerWidth(); // box 클래스의 border를 제외한 가로크기 값을 가져온다
$('.box').innerHeight(); // box 클래스의 border를 제외한 세로크기 값을 가져온다
// width, height 값 120

 

만약 border 값 까지의 크기를 가지고 오고 싶다면 아래와 같이 실행한다.

$('.box').outerWidth(); // box 클래스의 border,padding값까지의 가로크기 값을 가져온다
$('.box').outerHeight(); // box 클래스의 border,padding값까지의 세로크기 값을 가져온다
// width, height 값 122