Javascript : toggle기능 만들기

5204 단어 JavaScriptJavaScript

toggle()메서드를 사용합니다.

DOMTokenList.toggle(token)

token: 내가 toggle하고자 하는 문자열(string)

DOMTokenList
공백으로 구분된 문자열로 표현된 데이터를 정렬하여 토큰 집합으로 만들어 집합을 조작하기 위한 메소드를 제공하는 유사배열 인터페이스이다.

HTML

  <body>
    <header class="toggle-box">
      <button class="toggle-btn toggle-btn__night"></button>
    </header>
    <section class="bg night"></section>
  </body>

CSS

:root {
  --toggle-width: 70px;
  --toggle-night-bg-color: rgb(205, 205, 205);
  --toggle-day-bg-color: rgb(207, 224, 235);
  --toggle-box-padding: 3px;
}

body {
  width: 100vw;
  height: 100vh;
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  overflow: hidden;
  transition: all 400ms;
}
.night {
  background: #000000;
}
.day {
  background: rgb(238, 250, 255);
}
.toggle-box {
  position: relative;
  background-color: var(--toggle-day-bg-color);
  border-radius: 20px;
  width: var(--toggle-width);
  height: 33px;
  margin: 40px auto;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: var(--toggle-box-padding);
  overflow: hidden;
}
.toggle-box::after {
  content: "";
  position: absolute;
  z-index: 10;
  background-color: var(--toggle-night-bg-color);
  border-radius: 20px;
  width: var(--toggle-width);
  height: 33px;
  padding: var(--toggle-box-padding);
  transform: translateX(calc(-100% - var(--toggle-box-padding)));
  transition: all 400ms;
}
.toggle-box__day::after {
  content: "";
  position: absolute;
  z-index: 10;
  background-color: var(--toggle-night-bg-color);
  border-radius: 20px;
  width: var(--toggle-width);
  height: 33px;
  padding: var(--toggle-box-padding);
  transform: translateX(calc(0px - var(--toggle-box-padding)));
  transition: all 400ms;
}
.toggle-btn {
  position: relative;
  z-index: 20;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 15px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: transform 400ms;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}
.toggle-btn__night {
  transform: translateX(var(--toggle-box-padding));
}
.toggle-btn__day {
  transform: translateX(
    calc(var(--toggle-width) / 2 + var(--toggle-box-padding))
  );
}

Javascript

const bgToggleBox = document.querySelector(".toggle-box");
const bgToggleBtn = document.querySelector(".toggle-btn");
const bg = document.querySelector(".bg");

//toggle로 class를 추가,제거한다.

toggleMainBg();
function toggleMainBg() {
  bgToggleBtn.addEventListener("click", () => {
    const bgClasses = bg.classList;
    bgClasses.toggle("night");
    bgClasses.toggle("day");
  });
}

//toggle button을 클릭하면, 버튼이 이동하고, toggle box의 배경색이 변한다.

handleToggleBtn();
function handleToggleBtn() {
  bgToggleBtn.addEventListener("click", () => {
    const bgToggleBtnClasses = bgToggleBtn.classList;
    const bgToggleBoxClasses = bgToggleBox.classList;
    bgToggleBtnClasses.toggle("toggle-btn__night");
    bgToggleBtnClasses.toggle("toggle-btn__day");
    bgToggleBoxClasses.toggle("toggle-box__day");
  });
}

이 외에도 toggle과 관련하여

  • Element.toggleAttribute()
  • HTMLDetailsElement의 toggle event
    를 사용할 수 있습니다.
[정렬] 파이썬 내장함수
[프로그래머스-Python] 기능개발

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage