[Javascript] 바닐라 JS로 toggleClass 하기

오랜만에 쓰는 벨로그 글.. 끝없는 업무와 야근에 치여 공부를 소홀히 했다..😢
조금의 여유가 생겼을때 틈틈히 공부해야지..

---

📌 JavaScript로 toggleClass 기능 구현하기

오늘은 바닐라 자바스크립트(Vanilla JavaScript)로 제이쿼리의 toggleClass 기능을 구현해 보겠습니다!

HTML

<button class="nav-btn">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</button>

CSS

* { 
  margin: 0;
  padding: 0;
}

button {
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.nav-btn {
  position: relative;
  display: block;
  width: 60px;
  height: 45px;
  margin: 50px auto;
  transition: .5s ease-in-out;
  transform: rotate(0deg);
}

.nav-btn span { 
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 9px;
  background-color: #d3531a;
  border-radius: 9px;
  opacity: 1;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.nav-btn span:nth-child(1) {
  top: 0px;
}

.nav-btn span:nth-child(2), .nav-btn span:nth-child(3) {
  top: 18px;
}

.nav-btn span:nth-child(4) {
  top: 36px;
}

/* active */
.nav-btn.active span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.nav-btn.active span:nth-child(2) {
  transform: rotate(45deg);
}

.nav-btn.active span:nth-child(3) {
  transform: rotate(-45deg);
}

.nav-btn.active span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

햄버거 버튼을 예시로 들어볼게요.
버튼을 클릭할때마다 active 클래스가 붙었다가 떼졌다가 할거에요!
우선 버튼 커스텀을 해주고~🎨

JavaScript

const navBtn = document.querySelector('.nav-btn');

navBtn.addEventListener('click', function(){
  if(navBtn.classList.contains('active')){
    	navBtn.classList.remove('active');
	}else{
  		navBtn.classList.add('active');
	};
});

버튼을 클릭할때마다 active 라는 클래스가 있는지 contains 메소드로 확인하고 없으면 붙여주고! 있으면 제거해주기!

간단하죠? 코드펜으로 확인해 볼게요!

짠 😎
손쉽게 구현했습니다!

toggleClass 기능이 필요한곳이 많으니까 함수로 관리해볼게요!

Function으로 작성하기

const navBtn = document.querySelector('.nav-btn');

function toggleClass(element, className) {
  if(element.classList.contains(className)){
    element.classList.remove(className);
  }else{
    element.classList.add(className);
  };
}
navBtn.addEventListener('click', function(){
  toggleClass(navBtn, 'active');
});

toggleClass라는 함수를 만들어서 매개변수로 element 와 className 을 받아서 어디에서든 사용할 수 있게 코드를 작성했어요.

작동도 잘되네요! 참쉽죠? 😎
그럼 이만! 오늘은 여기까지~~👋