JavaScript classList 속성으로 클래스를 전환하는 방법

JavaScript로 요소의 클래스를 전환하는 방법은 개발자로서 배울 수 있는 가장 실용적인 기술 중 하나입니다. 토글은 메뉴 표시 및 숨기기, 검색 필터 추가 및 제거, 소셜 미디어 버튼(좋아요, 추천 등)을 포함하여 많은 작업에 사용됩니다.

물론 컨텍스트에 따라 토글이 몇 줄의 코드보다 더 복잡할 필요는 없습니다. 오늘은 토글 뿐만 아니라 자바스크립트 전반을 배우는 간단한 방법을 배울 것입니다.

HTML 구조

JavaScript로 기능적인 내용을 다루기 전에 상호 작용할 수 있는 몇 가지 HTML 요소를 설정해 보겠습니다. 래퍼, 버튼, 상자를 만들어 보겠습니다.

HTML 문서의 본문 태그 안에 다음을 입력하세요.

<div class="wrapper">
  <button class="button">Toggle</button>
  <div class="box"></div>
</div>

부모 div 요소(wrapper)는 거기에만 있으므로 CSS로 자식 요소(상자 및 버튼)를 가운데에 둘 수 있습니다. 이것은 장식용이며 작동하는 데 필요하지 않습니다.

참고:CodePen과 같은 온라인 코드 편집기를 사용하는 경우 HTML 탭 창에서 이 코드를 추가할 수 있습니다. 본문 태그를 포함하여 뒤에서 HTML의 나머지 부분을 추가합니다.

CSS 스타일

상위 div 요소에는 .wrapper가 있습니다. 하위 요소인 상자와 버튼을 가운데 정렬하는 일부 Flexbox 속성이 있는 클래스입니다. Flexbox의 방법과 이유는 다른 튜토리얼을 위해 다루지 않겠습니다.

버튼과 상자에는 미용 목적으로 몇 가지 기본 스타일 클래스가 있습니다.

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

여기서 집중해야 할 중요한 것은 .bg-red입니다. CSS background-color를 포함하는 클래스 값이 '#AA2F18'인 속성(빨간색). 이것은 버튼 요소를 클릭할 때 상자 요소로 토글(추가 또는 제거)하려는 클래스입니다.

자바스크립트 이벤트 처리

JavaScript로 요소를 조작하기 전에 먼저 두 요소(상자와 버튼)에 대한 참조를 저장해야 합니다. 두 개의 변수 button를 선언하여 이를 수행합니다. , 및 box .그런 다음 두 요소를 각각의 변수에 할당합니다.

참조를 저장하려는 상자와 버튼 요소를 선택하려면 영광스러운 querySelector를 사용합니다. 요소의 클래스를 가져오는 방법:

let button = document.querySelector(".button");
let box = document.querySelector(".box");

이제 각 대상 요소에 대한 참조가 있으므로 속성과 메서드에 액세스하여 DOM을 조작할 수 있습니다. 이 경우 이벤트 리스너를 사용하려고 합니다. 클릭 이벤트를 수신합니다. 버튼 요소에. 클릭이 감지된 후 기능을 실행하려고 합니다. 배경색 전환을 실행하는 우리의 상자 요소에.

이를 위해 addEventListener()를 첨부합니다. (변수 참조를 통해) 버튼 요소에 메서드를 추가합니다. 이 이벤트 리스너 메서드 내에서 두 개의 매개변수 값을 추가합니다. 'click' (이벤트 유형) 및 function() . 이 예에서는 익명(이름 없는) 함수를 사용합니다.

그런 다음 익명 함수 내부에서 JavaScript classList 속성의 toggle()을 첨부합니다. 메서드를 box 요소에 추가합니다. 토글 메소드의 역할은 .bg-red를 추가하거나 제거하는 것입니다. 클래스:

button.addEventListener("click", function() {
  box.classList.toggle("bg-red");
});

classList 토글 메서드는 다음과 같이 작동합니다. 지정된 클래스가 이미 대상 요소에 있으면 제거됩니다. 존재하지 않으면 추가됩니다.

완료되었습니다! 이제 일반 JavaScript로 지정된 요소의 클래스를 전환하는 방법을 알게 되었습니다. 이 튜토리얼의 모든 코드를 CodePen에 올렸습니다.

코드는 IE10 이상의 모든 최신 브라우저와 호환됩니다.