HTML의 Window outerHeight 속성은 메뉴 바, 툴바, 스크롤 바 등 모든 인터페이스 요소를 포함한 브라우저 창의 전체 높이를 픽셀(px) 단위로 반환합니다.
참고로 innerHeight 속성은 페이지 콘텐츠가 표시되는 영역(뷰포트)의 높이만 반환하는 반면, outerHeight는 브라우저 자체의 UI 요소까지 모두 포함한다는 점에서 차이가 있습니다.
문법
outerHeight 속성의 기본 문법은 다음과 같습니다.
window.outerHeight
예제
버튼을 클릭하면 현재 브라우저 창의 전체 높이를 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>HTML Window outerHeight 속성</h1>
<button onclick="display()" class="btn">브라우저 창 높이 보기</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = '브라우저 창 전체 높이: ' + window.outerHeight + "px";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
“브라우저 창 높이 보기” 버튼을 클릭하면 인터페이스 요소를 포함한 브라우저 창의 전체 높이가 아래와 같이 표시됩니다.
