[HTML_CSS] JQ - outerHeight() 메서드 - 요소 높이 반환 (height + padding + border + margin △)

1. outerHeight() 예제 - height + padding + border
2. outerHeight() 정의
3. outerHeight() 구문
4. outerHeight() 예제 - height + padding + border + margin
5. outerHeight() 예제 - 관련 메서드

outerHeight() 예제 - height + padding + border

 

<style>

div {height:100px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:yellow;}

</style>

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

<script>

$(document).ready(function(){

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

        alert("div 요소의 outerHeight: " + $("div").outerHeight());

  });

});

</script>

<div style="">홈짱닷컴 Homzzang.com</div>

<br>

<button>클릭</button>

 

결과보기

※ 결과값: 122 = 100 + 10 x 2 + 1 x 2

outerHeight() 정의

 

첫 번째 일치 요소의 outerHeight 높이 반환.

 

---

 

1. 매개변수 값에 따라 outerHeight 달라짐.

• false (기본값) 경우: outerHeight = Height + Padding + Border
• true 경우: outerHeight = Height + Padding+ Border + Margin

 

2. 관련 메서드

width() - 선택요소의 너비 반환/설정.

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

outerWidth() - (width + padding + border) 반환.

outerWidth(true) - (width + padding + border + margin) 반환.

 

height() - 선택요소의 높이 반환/설정.

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

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

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

 

3. 예제 더 보기

https://api.jquery.com/outerheight/

 

outerHeight() 구문

 

$(selector).outerHeight(includeMargin)

 

---

[매개변수]

 

includeMargin

선택. margin 포함 여부.

• false 경우 : margin 포함 X (기본값)
• true 경우 : margin 포함 O

 

outerHeight() 예제 - height + padding + border + margin

 

<style>

div {height:100px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:yellow;}

</style>

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

<script>

$(document).ready(function(){

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

        alert("div 요소의 outerHeight: " + $("div").outerHeight(true));

  });

});

</script>

<div style="">홈짱닷컴 Homzzang.com</div>

<br>

<button>클릭</button>

 

결과보기

※ 결과값: 128 = 100 + 10 x 2 + 1 x 2 + 3 x 2

outerHeight() 예제 - 관련 메서드

 

<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>

 

결과보기