[HTML_CSS] JQ - innerHeight() 메서드 - 높이 반환 (height + padding) (= innerHeight메서드 = 이너하이트 메서드)

1. innerHeight() 예제 - (height + padding) 너비 반환
2. innerHeight() 정의
3. innerHeight() 구문
4. innerHeight() 예제 - 높이 관련 메서드 비교

innerHeight() 예제 - (height + padding) 너비 반환

 

<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("innerHeight: " + $("div").innerHeight());

  });

});

</script>

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

<button>클릭</button>

 

결과보기 (결과값: 120 = 100 + 10 x 2개)

innerHeight() 정의

 

요소의 innerHeight 높이 반환.

 ※ innerHeight() = height + padding

---

[관련 메서드]

 

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) 반환.

 

innerHeight() 구문

 

$(selector).innerHeight()

 

---

[매개변수]

 

없음.

 

innerHeight() 예제 - 높이 관련 메서드 비교

 

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

 

결과보기