<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 id="title">Hello JavaScript!!</h1>
<script src="index.js">
</script>
</body>
</html>
const title = document.querySelector("body");
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c", "#C18282", "#FF50CF","#0A9696"];
const RESIZE_CLASS =
title.style.backgroundColor = colors[0];
function handleResize() {
var wframe = window.innerWidth
console.log(wframe);
if(wframe<=200){
title.style.backgroundColor = colors[1];
}else if(wframe>200 &&wframe <=400){
title.style.backgroundColor = colors[2];
}else if(wframe>400 &&wframe <=600){
title.style.backgroundColor = colors[3];
}else if(wframe>600 &&wframe <=800){
title.style.backgroundColor = colors[4];
}else if(wframe>800 &&wframe <=1000){
title.style.backgroundColor = colors[6];
}else if(wframe>1000 &&wframe <=1200){
title.style.backgroundColor = colors[6];
}else if(wframe>1200 &&wframe <= 1400){
title.style.backgroundColor = colors[7];
}
}
window.addEventListener("resize", handleResize);
Window.innerWidth 세로 스크롤을 포함한 윈도우 창의 가로 길이를 가져온다.
window.addEventListener("resize", handleResize); 윈도우 창의 사이즈가 변경될 때마다 이벤트가 발생한다.
https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event
'JS > Javascript' 카테고리의 다른 글
| const 변수 정리(JavaScript) (0) | 2020.08.06 |
|---|---|
| Function Scope VS Block Scope 스코프 (JavaScript) (0) | 2020.08.06 |
| Element.classList.add 자바스크립트로 클래스 추가하기(JavaScript) (0) | 2020.08.06 |
| addEventListener 간단한 예제(JavaScript) (0) | 2020.08.05 |
| getElementBy 메소드(JavaScript) (0) | 2020.08.04 |
