window.outerHeight

outerHeight

outerHeight 속성은 브라우저의 세로 값(스크롤바 포함)을 가져옵니다. 브라우저의 속성 값을 가져오기만 할 수 있으며, 스크롤바 값을 포함하고 싶지 않다면, innerHeight 속성을 사용합니다.

---

outerHeight

outerHeight 속성은 브라우저의 세로 값(스크롤바 포함)을 가져옵니다.

특징	설명
유형(type)	window
버전(version)	ES1
결과값(return)	숫자(number)
사용성	★★★☆☆

문법(Syntax)

window.outerHeight

정의(Definition)

• outerHeight 속성은 브라우저의 세로 값(스크롤바 포함)을 가져옵니다.

비교(Compare)

• innerWidth 속성은 브라우저의 가로 값(스크롤바 미포함)을 가져옵니다.
• innerHeight 속성은 브라우저의 세로 값(스크롤바 미포함)을 가져옵니다.
• outerWidth 속성은 브라우저의 가로 값(스크롤바 포함)을 가져옵니다.
• outerHeight 속성은 브라우저의 세로 값(스크롤바 포함)을 가져옵니다.

예제1(Sample)

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

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

버튼을 클릭하면 브라우저의 가로값(innerWidth)을 구합니다. 버튼을 클릭하면 브라우저의 세로값(innerHeight)을 구합니다. 버튼을 클릭하면 브라우저의 가로값(outerWidth)을 구합니다. 버튼을 클릭하면 브라우저의 세로값(outerHeight)을 구합니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div class="desc">여기에 결과값이 표시됩니다.</div>
</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 .desc {
    padding-top: 10px;
}

const box = document.querySelector(".jsample .box");

document.querySelector(".sampleBtn .btn1").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 브라우저의 가로 값은 "+ window.innerWidth + "px 입니다.";
});
document.querySelector(".sampleBtn .btn2").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 브라우저의 세로 값은 "+ window.innerHeight + "px 입니다.";
});
document.querySelector(".sampleBtn .btn3").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 브라우저의 가로 값은 "+ window.outerWidth + "px 입니다.";
});
document.querySelector(".sampleBtn .btn4").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 브라우저의 세로 값은 "+ window.outerHeight + "px 입니다.";
});

호환성(Compatibility)

						6	7	8	9	10	11
outerHeight	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○

참고 사이트(Reference)

• MDN

---