jQuery 공작소 : .innerWidth()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
innerWidth 메소드는 안쪽 너비를 알아냅니다. (width + padding 값)
예제 1
기본 예제
보기
width : 400px 인 DIV 의 너비 알아보기
padding 좌우 20px, 테두리두께 좌우 각 5px
실제 DIV 의 너비는 450px 입니다.
이 예제의 innerWidth 는 width 400px + 왼쪽 padding 20px + 오른쪽 padding 20px = 440px 입니다.
padding 좌우 20px, 테두리두께 좌우 각 5px
실제 DIV 의 너비는 450px 입니다.
이 예제의 innerWidth 는 width 400px + 왼쪽 padding 20px + 오른쪽 padding 20px = 440px 입니다.
소스
<style type="text/css">
.css_test {
background : #efefef;
border : 5px solid gray;
margin : 0 auto; /* DIV 가운데로 정렬 */
padding : 20px;
width : 400px;
}
</style>
width : 400px 인 DIV 의 너비 알아보기<br>
padding 좌우 20px, 테두리두께 좌우 각 5px<br>
실제 DIV 의 너비는 450px 입니다.<br>
<div class="css_test">
<br><br>
<button type="button" onclick="alert($('.css_test').innerWidth())">innerWidth 보기</button> <button type="button" onclick="alert($('.css_test').width())">width 보기(비교용)</button><br>
<br><br>
</div>
<br>
이 예제의 innerWidth 는 width 400px + 왼쪽 padding 20px + 오른쪽 padding 20px = 440px 입니다.
.css_test {
background : #efefef;
border : 5px solid gray;
margin : 0 auto; /* DIV 가운데로 정렬 */
padding : 20px;
width : 400px;
}
</style>
width : 400px 인 DIV 의 너비 알아보기<br>
padding 좌우 20px, 테두리두께 좌우 각 5px<br>
실제 DIV 의 너비는 450px 입니다.<br>
<div class="css_test">
<br><br>
<button type="button" onclick="alert($('.css_test').innerWidth())">innerWidth 보기</button> <button type="button" onclick="alert($('.css_test').width())">width 보기(비교용)</button><br>
<br><br>
</div>
<br>
이 예제의 innerWidth 는 width 400px + 왼쪽 padding 20px + 오른쪽 padding 20px = 440px 입니다.
관련 CSS
jQuery
$( 셀렉터 ).innerWidth() - 셀렉터에 해당하는 요소의 안쪽 너비를 알아냅니다.
- 지정된 width 와 padding 의 값을 포함합니다.
- margin 과 border 두께값은 포함하지 않습니다.
+ 관련 jQuery +