[자바스크립트] window 창 크기

 

자바스크립트 window 창 크기 컨트롤

• 윈도우 크기 창 크기를 알아보자.

 

window.innerWidth : 브라우저 화면의 너비

window.innerHeight : 브라우저 화면의 높이

window.outerWidth : 브라우저 전체의 너비

window.outerHeight : 브라우저 전체의 높이

 

const body = document.querySelector("body");

function handleResize() {
  const length = window.innerWidth;

  if (length < 800) {
    body.className = "small";
  } else if (length > 800 && length < 1200) {
    body.className = "medium";
  } else if (length > 1200) {
    body.className = "large";
  }
}

window.addEventListener("resize", handleResize);

 

아래 블로그에 자세한 설명이 있다.

[javascript] 윈도우 창 크기 (window.outerWidth, window.outerHeight, window.outerHeight, window.innerWidth, innerHeight)