width, innerWidth, outerWidth의 차이점

자바스크립트를 하다보면 요소의 길이를 알고 싶을때가 있다.

그때 쓸 수 있는게 .width() 인데 이 width값은 여러가지의 경우가 있다.

 

.width() : 요소의 너비값만 구할 경우

.innerWidth() : 요소의 너비 값 + padding을 더한 값

.outerWidth() : 요소의 너비 값과 padding + border를 더한 값

.outerWidth(true) : 파라미터에 true를 넣을 경우 요소의 width, padding, border, margin을 모두 포함한 값을 나타낸다.

 

ex) .box {width: 50px; height: 50px; padding: 10px; margin: 10px; border: 5px solid #000;} 경우,

$('.box').width() : 50px(요소의 너비값)

$('.box').innerWidth() : 50px(요소의 너비값) + 20px(padding) = 70px

$('.box').outerWidth() : 50px(요소의 너비값) + 20px(padding) + 10px(border 5px+5px) = 80px

$('.box').outerWidth(true) : 50px(요소의 너비값) + 20px(padding) + 10px(border 5px+5px) + 20px(margin) = 100px

 

 

** 자매품 .height()(높이)도 있다.