[jQuery기초] 요소조작_이벤트_width_innerWidth_height_innerHeight

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

 

width

요소의 너비 값을 가져온다.
css의 padding 값을 무시한다.

// CSS
#box { padding:50px; width:300px; }

// HTML
<div id="box"></div>

// jQuery
$('#box').width(); // 300을 반환

 

innerWidth

요소의 너비 값을 가져온다.
css의 padding 값을 포함한 값을 가져온다.

// CSS
#box { padding:50px; width:300px; }

// HTML
<div id="box"></div>

// jQuery
$('#box').innerWidth(); // 400을 반환

 

height

요소의 높이 값을 가져온다.
css의 padding 값을 무시한다.

// CSS
#box { padding:50px; height:300px; }

// HTML
<div id="box"></div>

// jQuery
$('#box').height(); // 300을 반환

 

innerHeight

요소의 높이 값을 가져온다.
css의 padding 값을 포함한 값을 가져온다.

// CSS
#box { padding:50px; height:300px; }

// HTML
<div id="box"></div>

// jQuery
$('#box').innerHeight(); // 400을 반환