[HTML_CSS] JQ - outerWidth() 메서드 - 요소 너비 반환 (※ padding, border 둘다 포함) (= outerWidth메서드 = 아웃위드스메서드)

1. outerWidth() 예제 - (width + padding + border) 너비 반환.
2. outerWidth() 정의
3. outerWidth() 구문
4. outerWidth() 예제 - (width + padding + border + margin) 너비 반환.
5. outerWidth() 예제 - 너비 관련 메서드 비교.

outerWidth() 예제 - (width + padding + border) 너비 반환.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("div").text("outerWidth: " + $("div").outerWidth());

  });

});

</script>

<div style="height:100px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:pink;"></div><br>

<button>클릭</button>

 

 

결과보기 (결과값: 222 = 200 + 10 x 2개 + 1 x 2개)

outerWidth() 정의

 

요소의 outerWidth 너비 반환.

 

※ outerWidth() = width + padding + border

※ outerWidth(false) = width + padding + border

※ outerWidth(true) = width + padding + border + margin

 

PS. false는 기본값이라 생략 가능. 

---

[관련 메서드]

 

width() - 요소 width 설정/반환.

height() - 요소 height 설정/반환.

innerWidth() - 요소 (width + padding) 반환.

innerHeight() - 요소 (height + padding) 반환.

outerHeight() - 요소 (height + padding + border) 반환.

outerHeight(true) - 요소 (height + padding + border + margin) 반환.

 

outerWidth() 구문

 

$(selector).outerWidth(includeMargin)

 

---

[매개변수]

 

includeMargin

선택. 너비에 margin 포함 여부 지정.

false : margin 포함 X. (기본값)

true : margin 포함 O.

 

outerWidth() 예제 - (width + padding + border + margin) 너비 반환.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("div").text("outerWidth: " + $("div").outerWidth(true));

  });

});

</script>

<div style="height:100px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:pink;"></div><br>

<button>클릭</button>

 

 

결과보기 (결과값: 228 = 200 + 10 x 2개 + 1 x 2개 + 3 x 2개)

outerWidth() 예제 - 너비 관련 메서드 비교.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    var txt = "";

    txt += "width: " + $("#hz").width() + "</br>";

    txt += "innerWidth: " + $("#hz").innerWidth() + "</br>";

    txt += "outerWidth: " + $("#hz").outerWidth() + "</br>";

    txt += "outerWidth (margin 포함O): " + $("#hz").outerWidth(true) + "</br>" + "</br>";

  

    txt += "height: " + $("#hz").height() + "</br>";   

    txt += "innerHeight: " + $("#hz").innerHeight() + "</br>";

    txt += "outerHeight: " + $("#hz").outerHeight() + "</br>";

    txt += "outerHeight(margin 포함): " + $("#hz").outerHeight(true) + "</br>";

    $("#hz").html(txt);

  });

});

</script>

<style>

#hz {

    height:300px;

    width:300px;

    padding:10px;

    margin:4px;

    border:2px solid blue;

    background-color:lightblue;

}

</style>

<div id="hz"></div>

<button>클릭</button>

 

결과보기