.outerWidth()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

outerWidth 메소드는 다른 CSS 값을 포함한 너비를 알아냅니다.

+_+
예제 1
다른 CSS 설정이 같이 적용되어 있을때의 너비 알아보기
보기
width : 400px 인 DIV 의 너비 알아보기
padding 좌우 20px, 테두리두께 좌우 각 5px
실제 DIV 의 너비는 450px 입니다.





소스
<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').outerWidth())">outerWidth 보기</button> <button type="button" onclick="alert($('.css_test').width())">width 보기(비교용)</button><br>
    <br><br>
</div>
관련 CSS
jQuery

$( 셀렉터 ).outerWidth()  -  셀렉터에 해당하는 요소의 바깥쪽 너비를 알아냅니다.

padding, margin, border 의 값을 포함합니다.


예제 2
margin 을 포함한 너비 outerWidth(true) 예제
보기
margin 을 포함한 값 알아보기





소스
<style type="text/css">
    .css_test {
        background : #efefef;
        border : 5px solid gray;
        display : inline-block;
        margin : 20px;
        padding : 20px;
        width : 400px;
    }
</style>

margin 을 포함한 값 알아보기<br>
<div class="css_test">
    <br><br>
    <button type="button" onclick="alert($('.css_test').outerWidth())">기본 보기</button>
    <button type="button" onclick="alert($('.css_test').outerWidth( true ))">margin 포함 보기</button><br>
    <br><br>
</div>
관련 CSS
jQuery

- 사방으로 20px 씩 margin 이 적용된 DIV 입니다.
- 너비에 margin 을 포함하면 40px 가 추가됩니다.

.outerWidth( true )  -  true 옵션을 사용하면 margin 까지 포함한 너비를 알아냅니다.

+ 관련 jQuery +
jQuery 홈페이지 .outerWidth() API 문서 : https://api.jquery.com/outerWidth/