JQuery

[HTML_CSS] JQ - height() 메서드 - 높이 설정/반환. (= height메서드 = 하이트메서드)

목차

  1. height() 예제 - 높이 반환
  2. height() 정의
  3. height() 구문
  4. height() 예제 - 높이 설정
  5. height() 예제 - 함수 사용해 높이 늘이기
  6. height() 예제 - window 및 document 요소 높이 반환
  7. height() 예제 - 관련 메서드와 비교

 

height() 예제 - 높이 반환

 

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

  });

});

</script>


<style>

div {

    height:100px;

    width:200px;

    padding:10px;

    margin:20px;

    border:1px solid blue;

    background-color:yellow;

}

</style>


<div></div>

<button>클릭</button>

 

결과보기

결과값: div 높이: 100

 

height() 정의

 

선택요소의 높이를 설정/반환.

 



1. 

  • 반환 - 선택자와 첫 번째 일치 요소의 높이를 반환.
  • 설정 - 선택자와 모든 일치 요소의 높이를 설정.


2.

주의: (padding, border, margin) 값은 포함 X


3.  cf.

 

(1) 너비

 

(2) 높이

 

4. cf.

  • PC 윈도우 높이: $(window).height()
  • 모바일 높이: window.visualViewport.height

  

 

height() 구문


반환

$(selector).height()

 

설정

  • $(selector).height(value)
  • $(selector).height(function(index,currentwidth))

 


[매개변수]

 

value

필수. 설정할 높이값.

  • 너비를 px, em, pt 등으로 지정. (기본 단위: px)
  • px가 아닌 em, pt 등 단위 붙일 땐, 큰따옴표(" ")로 감쌈.
  • px는 기본 단위라서, 따로 단위 붙일 필요없이 숫자만 입력.


function (index, currentwidth)

선택. 선택요소의 새 높이를 반환하는 함수.

  • index - 집합에서 요소의 인덱스 (= 색인번호) 위치를 반환.
  • currentwidth - 선택요소의 현재 높이를 반환.

 

 

height() 예제 - 높이 설정

 

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

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("div").height(200);

  });

  $("#btn2").click(function(){

    $("div").height("10em");

  });

  $("#btn3").click(function(){

    $("div").height("100pt");

  });

});

</script>


<style>

div {

    height:100px;

    width:200px;

    padding:10px;

    margin:20px;

    border:1px solid blue;

    background-color:yellow;

}

</style>


<button id="btn1">200px 설정</button>

<button id="btn2">10em 설정</button>

<button id="btn3">100pt 설정</button>

<div></div>

 

결과보기

 

height() 예제 - 함수 사용해 높이 늘이기

 

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

<script>

$(document).ready(function(){

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

    $("div").height(function(n, c){

      return c + 200;

    });

  });

});

</script>


<style>

div {

    height:100px;

    border:4px solid;

    margin:10px;

}

</style>


<button>높이를 200px 늘리기.</button><br><br>

<div></div>

<div></div>

 

결과보기

PS. 첫 번째 요소만 높이 늘리기: if(n ==0) return c + 200;

 

height() 예제 - window 및 document 요소 높이 반환

 

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

<script>

$(document).ready(function(){

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

    $("#span1").text($(window).height());

    $("#span2").text($(document).height());

  });

});

</script>


<p>window 높이: <span id="span1">?</span> px.</p>

<p>document 높이:  <span id="span2">?</span> px.</p>

<button>window 및 document 요소의 높이 반환</button>

 

결과보기

 

height() 예제 - 관련 메서드와 비교

 

<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메서드 = 허버 메서드)
1/20
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 5
웹유틸
회원센터
홈짱 PC버전 로그인