• Q&A
  • 회원가입
  • 로그인

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

239  

목차

  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. 

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

 

 

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>

 

결과보기



찾아주셔서 감사합니다. Since 2012