jQuery 공작소 : .height()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

height 메소드는 지정된 요소의 높이를 지정하거나 가져옵니다.

예제 1
기본예제 - DIV 의 높이 알아보기
보기
height : 200px 인 DIV 의 높이 알아보기



소스
<style type="text/css">
    .css_test {
        height : 200px;
        background : #efefef;
    }
</style>

height : 200px 인 DIV 의 높이 알아보기
<div class="css_test">
    <br><br><br>
    <button type="button" onclick="alert($('.css_test').height())">height 보기</button>
</div>
관련 CSS
jQuery

$( 셀렉터 ).height()  -  셀렉터에 해당하는 요소의 높이를 파악


예제 2
다른 CSS 설정이 같이 적용되어 있을때의 높이 알아보기
보기
height : 200px 인 DIV 의 높이 알아보기
padding 위아래 20px, 테두리두께 위아래 각 5px
실제 DIV 의 높이는 250px 입니다.



소스
<style type="text/css">
    .css_test {
        background : #efefef;
        height : 200px;
        padding : 20px;
        border : 5px solid gray;
    }
</style>

height : 200px 인 DIV 의 높이 알아보기<br>
padding 위아래 20px, 테두리두께 위아래 각 5px<br>
실제 DIV 의 높이는 250px 입니다.<br>
<div class="css_test">
    <br><br><br>
    <button type="button" onclick="alert($('.css_test').height())">height 보기</button>
</div>
관련 CSS
jQuery
- 모든게 포함된 높이를 알고 싶다면 .outerHeight() 메소드를 참고해 보세요.
예제 3
CSS height 설정이 되어있지 않은 DIV 의 높이 알아보기
보기
CSS height 가 지정되지 않은 DIV 의 높이 알아보기





소스
<style type="text/css">
    .css_test {
        background : #efefef;
        padding : 20px;
        border : 5px solid gray;
    }
</style>

CSS height 가 지정되지 않은 DIV 의 높이 알아보기
<div class="css_test">
    <br><br>
    <button type="button" onclick="alert($('.css_test').height())">height 보기</button><br>
    <br><br>
</div>
관련 CSS
jQuery

- 상황에 맞게 계산되어 정해진 높이값을 알아냅니다.
- padding, border 값을 포함하지 않은 높이만 알아냅니다.

예제 4
window 와 document 객체의 높이 알아보기
보기
소스
<button type="button" onclick="alert($(window).height())">window 객체의 height 보기</button>
<button type="button" onclick="alert($(document).height())">document 객체의 height 보기</button>
예제 5
이미지 높이 지정해 보기
보기
소스
<style type="text/css">
    .css_test {
        padding : 10px;
        border : 5px solid gray;
        margin-top : 10px;
    }
    .css_test img {
        height : 50px;
    }
</style>

<button type="button" onclick="$('.css_test img').height(100)">높이 100 으로 지정</button>
<button type="button" onclick="$('.css_test img').height('200px')">높이 200 으로 지정</button>
<button type="button" onclick="$('.css_test img').height('auto')">높이 원래대로 (초기화)</button>
<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/211F9841555AC4FE24" />
</div>
관련 CSS
jQuery

$( 셀렉터 ).height(  )  -  셀렉터에 해당하는 요소의 높이 을 지정

$( '.css_test img' ).height( 100 )  -  클래스명이 css_test 인 것의 이미지의 높이를 100 으로 지정
$( '.css_test img' ).height( '200px' )  -  클래스명이 css_test 인 것의 이미지의 높이를 200px 로 지정
$( '.css_test img' ).height( 'auto' )  -  클래스명이 css_test 인 것의 이미지의 높이를 초기화하여 원래의 높이로 적용

※ 숫자만 입력시 px 단위 값으로 적용됩니다.

+ 관련 jQuery +
jQuery 홈페이지 .height() API 문서 : https://api.jquery.com/height/