javascript-28: resize/classList
윈도우 화면 크기에 따른
<!DOCTYPE html>
<html>
<head>
<title>Vanilla Challenge</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>Hello!</h2>
<script src="./app.js"></script>
</body>
</html>
body {
width: 100%;
height: 100%;
}
.bigScreen {
background-color: blueviolet;
}
.mediumScreen {
background-color: yellow;
}
.smallScreen {
background-color: blue;
}
h2 {
color: white;
}
const body = document.body;
function handleResize() {
const innerWidth = window.innerWidth;
if (innerWidth > "1000") {
body.classList.add("bigScreen");
body.classList.remove("mediumScreen");
body.classList.remove("smallScreen");
} else if (innerWidth <= 1140 && innerWidth >= 700) {
body.classList.add("smallScreen");
body.classList.remove("bigScreen");
body.classList.remove("mediumScreen");
} else {
body.classList.add("mediumScreen");
body.classList.remove("bigScreen");
body.classList.remove("smallScreen");
}
}
window.addEventListener("
resize", handleRe
size);
- 윈도우 창의 너비: windwo.innerWidth
- if/else if/else 사용
- classList.add/remove이용하여 body에 클래스 추가/제거
댓글남기기