본문 바로가기

Webstoryboy

Category

Explanation

JQUERY/Alphabet

height()

height()

height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.


height()

height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.

특징 설명
버전(version) 1.x
결과값(return) 숫자(number)
사용성 ★★★☆☆

문법(Syntax)

"선택자".height()
"선택자".height(속성값)
"선택자".height(함수)

//세로 값을 가져오는 경우
$("div").height();

//세로 속성 값을 변경하는 경우
$("div").height("100");

//콜백 함수를 사용하는 경우
$("div").height(function(){});
  • 선택자(selector) : 세로 값을 구할 요소 선택자를 설정합니다.
  • 속성값(value) : 변경할 속성 값을 설정합니다.
  • 함수(function) : 세로 값을 구한 후 실행되는 함수를 설정합니다.

정의(Definition)

  • height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • height() 메서드와 css() 메서드는 높이 값을 똑같이 가져올 수 있습니다. 하지만 css() 메서드는 단위까지 출력이 된다는 차이점이 있습니다.

크기와 관련된 메서드(Dimensions Related method)

  • width() 메서드는 선택한 요소의 가로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerWidth() 메서드는 선택한 요소의 가로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerWidth() 메서드는 선택한 요소의 가로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerWidth(true) 메서드는 선택한 요소의 가로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.
  • height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerHeight() 메서드는 선택한 요소의 세로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerHeight(true) 메서드는 선택한 요소의 세로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.

비교(Compare) : Javascript

  • clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다.
  • clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다.
  • clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
  • clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.
  • offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다.
  • offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.
  • offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
  • offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다.
  • offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다.
  • getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
  • getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.

예제1(Sample)

버튼을 클릭하면 박스의 가로 값을 구하는 예제입니다.
height: 200px
margin: 20px
border: 1px
padding: 20px
여기에 결과값이 표시됩니다.
HTML
CSS
SCRIPT
<div class="jsample">
    <div class="box">
        <span>
            height: 200px<br>
            margin: 20px<br>
            border: 1px<br>
            padding: 20px<br>
        </span>
    </div>
    <p class="desc">여기에 결과값이 표시됩니다.</p>
</div>
.jsample {
    text-align: center;
}
.jsample .box {
    margin: 20px auto;
    width: 400px;
    height: 200px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jsample .box::before {
    content: '';
    width: 358px;
    height: 158px;
    border: 1px dashed #4390E1;
    position: absolute;
    left: 20px; top: 20px;
}
.jsample .box::after {
    content: '';
    width: 440px;
    height: 240px;
    border: 1px dashed #4390E1;
    position: absolute;
    left: -21px; top: -21px;
}
.jsample .box span {
    color: #fff;
}
.jsample .desc {
    padding-top: 10px;
}
$(".sampleBtn .btn1").click(function(){
    $(".jsample .desc").text("이 박스의 세로 값은 "+$(".jsample .box").height()+"px 입니다.(패딩, 마진, 보더 불포함)");
});
$(".sampleBtn .btn2").click(function(){
    $(".jsample .desc").text("이 박스의 세로 값은 "+$(".jsample .box").innerHeight()+"px 입니다.(패딩 포함 / 마진, 보더 불포함)");
});
$(".sampleBtn .btn3").click(function(){
    $(".jsample .desc").text("이 박스의 세로 값은 "+$(".jsample .box").outerHeight()+"px 입니다.(패딩, 보더 포함 / 마진 불포함)");
});
$(".sampleBtn .btn4").click(function(){
    $(".jsample .desc").text("이 박스의 세로 값은 "+$(".jsample .box").outerHeight(true)+"px 입니다.(패딩, 보더, 마진 포함)");
});

예제2(Sample)

버튼을 클릭하면 박스의 가로 값을 변경하는 예제입니다.
height: 200px
HTML
CSS
SCRIPT
<div class="jsample">
    <div class="box2">
        <span>height: 400px<br></span>
    </div>
</div>
.jsample .box2 {
    margin: 20px auto;
    width: 400px;
    height: 200px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jsample .box2 span {
    color: #fff;
}
$(".sampleBtn .btn0").click(function(){
    $(".jsample .box2").width("400");
    $(".jsample .box2 span").text("width: 400px");
});
$(".sampleBtn .btn1").click(function(){
    $(".jsample .box2").width(100);
    $(".jsample .box2 span").text("width: 100px");
});
$(".sampleBtn .btn2").click(function(){
    $(".jsample .box2").width(600);
    $(".jsample .box2 span").text("width: 600px");
});
$(".sampleBtn .btn3").click(function(){
    $(".jsample .box2").width("20%");
    $(".jsample .box2 span").text("width: 20%");
});

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
height() jQeury 1.x 버전
jQeury 2.x 버전
jQeury 3.x 버전

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기