JS) Window, resize event

Cecilia·2022년 12월 30일

목록 보기

29/36

https://developer.mozilla.org/en-US/docs/Web/API/Window

Window, resize event를 공부하면서 작성했던 코드를 블로그에도 저장용으로 올려보자!

1. 브라우저 width size에 따라 백그라운드 색상이 바뀌는 코드.

function changeColor() {
  const width = window.innerWidth;
  console.log(width);
  if (width <= 750) {
    document.body.style.background = "yellow";
  } else if (width > 750 && width <= 1300) {
    document.body.style.background = "purple";
  } else {
    document.body.style.background = "white";
  }
}

window.addEventListener("resize", changeColor);

백그라운드 색상 바꾼다고 검색을 꽤나 했었다..😅

2. 버튼을 클릭하면 백그라운드 색상이 바뀌는 코드

<!--HTML-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="yellowBtn">yellow</button>
    <button id="purpleBtn">purple</button>
    <script src="index.js"></script>
  </body>
</html>

//Javascript
const yellowBtn = document.querySelector("#yellowBtn");
const purpleBtn = document.querySelector("#purpleBtn");

function ChangeYellowColor() {
  document.body.style.backgroundColor = "yellow";
}

function ChangePurpleColor() {
  document.body.style.backgroundColor = "purple";
}

yellowBtn.addEventListener("click", ChangeYellowColor);
purpleBtn.addEventListener("click", ChangePurpleColor);

3. 그리고 아래 코드는 classList의 add를 함께 사용해본 코드.

<!--HTML-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <div id="greet">Hello!</div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

/*CSS*/
body {
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
}
#greet {
  font-size: 50px;
  font-weight: bold;
  color: white;
}

//Javascript
const colors = ["blue", "orange", "purple", "white"];
const div = document.querySelector("div");
div.style.backgroundColor = colors[0];

function changeColor() {
  const width = window.innerWidth;
  if (width <= 750) {
    div.classList.add("blueColor");
    div.style.backgroundColor = colors[0];
  } else if (width > 750 && width <= 1300) {
    div.classList.add("orangeColor");
    div.style.backgroundColor = colors[1];
  } else {
    div.classList.add("purpleColor");
    div.style.backgroundColor = colors[2];
  }
}
window.addEventListener("resize", changeColor);

nice~ =D

Cecilia

'이게 최선일까?'라는 고찰을 통해 끝없이 성장하고, 그 과정을 즐기는 프론트엔드 개발자입니다. 사용자의 입장을 생각하며 최선의 편의성을 찾기 위해 노력합니다.

JS) Window, resize event

JavaScript

JS) addEventListener()

JS) 선택자(DOM에서 Element 노드 찾기)

0개의 댓글