[자바스크립트] 클릭시 클래스 추가/제거

#javascript #toggle #click #classList #add #remove

 

안녕하세요 Gi_1입니다.

 

오늘은 제가 가장 많이 사용했던 클릭 시 클래스 제거/추가를 작성해보고자 합니다.

사실 업무를 할 때는 제이쿼리로 사용 했지만, 자바스크립트를 공부하며 다시 정리해봅니다!

 

첫번째는, toggle을 이용하여 하는 방법이고, 두번째는 if else를 이용하여 작성하겠습니다.

 

 

HTML

  <div class="hello">

    <h1 class="h1-font">

      Grab me!

    </h1>

  </div>

CSS

 .hello h1{

   color: blue;

   transition: all 0.3s ease-in-out;

 }

 .hello h1.clicked{

   color: tomato;

 }

 

Script

 

--공통--

const title = document.querySelector(".hello h1");

1. Toggle

function handleTitleClick(){

  title.classList.toggle("clicked");

}

// toggle

title.addEventListener("click", handleTitleClick);

 

2. If else를 통한 클래스 추가/제거

function handleTitleClick(){

  const clickedClass = "clicked";

  if(title.classList.contains(clickedClass)){

    title.classList.remove(clickedClass);

  } else {

    title.classList.add(clickedClass);

  }

}

 

 

물론 Toggle이 더 간단하고 쉽다. 하지만 if else로 사용해야 할 때도 있다.

또한 script로 추가한 클래스는 if else를 거치지 않으면 remove가 먹히지 않는다.

따라서, 해당 요소가 클래스를 가지고 있는지 판별하는 if문 안에 작성해야 한다.

 

클릭시 글자의 색상이 주황색(토마토)색상으로 바뀌면 성공!

 

 

 

제이쿼리 사용방법

https://gi-1.tistory.com/17

[jQuery] 클릭 시 클래스 추가/제거