outerHeight()

innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다.

outerHeight()

innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다.

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

문법(Syntax)

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

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

//세로 속성 값(마진값 포함)을 가져오는 경우
$("div").outerHeight(true);

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

//콜백 함수를 사용하는 경우
$("div").outerHeight(function(){});

선택자(selector) : 세로 값을 구할 요소 선택자를 설정합니다.
속성값(value) : 변경할 속성 값을 설정합니다.
함수(function) : 세로 값을 구한 후 실행되는 함수를 설정합니다.

정의(Definition)

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

크기와 관련된 메서드(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

여기에 결과값이 표시됩니다.

버튼을 클릭하면 height()을 구합니다. 버튼을 클릭하면 innerHeight()을 구합니다. 버튼을 클릭하면 outerHeight()을 구합니다. 버튼을 클릭하면 outerHeight(true)을 구합니다.

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)

버튼을 클릭하면 박스의 가로 값을 변경하는 예제입니다.

outerHeight: 200px

리셋 버튼을 클릭하면 세로 값을 100px로 변경합니다. 버튼을 클릭하면 세로 값을 600px로 변경합니다. 버튼을 클릭하면 세로 값을 20%로 변경합니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div class="box2">
        <span>outerHeight: 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").outerHeight("400");
    $(".jsample .box2 span").text("outerHeight: 400px");
});
$(".sampleBtn .btn1").click(function(){
    $(".jsample .box2").outerHeight(100);
    $(".jsample .box2 span").text("outerHeight: 100px");
});
$(".sampleBtn .btn2").click(function(){
    $(".jsample .box2").outerHeight(600);
    $(".jsample .box2 span").text("outerHeight: 600px");
});
$(".sampleBtn .btn3").click(function(){
    $(".jsample .box2").outerHeight("20%");
    $(".jsample .box2 span").text("outerHeight: 20%");
});

호환성(Compatibility)

							6	7	8	9	10	11
outerHeight()	jQeury 1.x 버전	○	○	○	○	○	○	○	○	○	○	○	○	○	○
	jQeury 2.x 버전	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○
	jQeury 3.x 버전	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○