• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

 

결과보기 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
Event JQ - blur() 메서드 ★ - 포커스 해제/제거(= blur메서드 = 블러메서드) ※ 포커스 시 아웃…
Event JQ - on() 메서드 ★★★★★ - 이벤트핸들러 부착 (= 여러이벤트・여러메서드 함께실행 = 이벤트부착…
Effect JQ - Hide/Show - hide() / show() / toggle() 메서드 ★ - 숨기기/보이기…
Effect JQ - Fade (페이드) ★ - fadeIn() / fadeOut() / fadeToggle() / fa…
Effect JQ - slideDown() / slideUp() / slideToggle() 메서드 ★ - 슬라이드메서드…
1/15
목록
찾아주셔서 감사합니다. Since 2012