if else events
1
2
3
4
5
6
7
8
9
10
11
12
13
function size() {
console.log(window.innerWidth);
if (window.innerWidth < 300) {
document.body.style.backgroundColor = "red";
} else if (window.innerWidth < 500 && window.innerWidth > 300) {
document.body.style.backgroundColor = "purple";
} else {
document.body.style.backgroundColor = "blue";
}
}
document.body.style.backgroundColor = "blue";
window.addEventListener("resize", size);
window창을 resize할때마다 색변하기
이방법보다 직접 클래스를 동기화해서넣어주는 클래스활성화인
classList를 사용해서만든다
classList innerWidth
mdn classList 링크 - https://developer.mozilla.org/ko/docs/Web/API/Element/classList
코딩 - https://codesandbox.io/s/empty-blueprint-forked-l9ffv?file=/src/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function size() {
const para = document.querySelector("body");
if (window.innerWidth < 500) {
para.classList.remove("baz");
para.classList.remove("bar");
para.classList.add("foo");
} else if (window.innerWidth < 800 && window.innerWidth > 500) {
para.classList.remove("foo");
para.classList.remove("baz");
para.classList.add("bar");
} else {
para.classList.remove("foo");
para.classList.remove("bar");
para.classList.add("baz");
}
}
window.addEventListener("resize", size);