JS연습하기3(toggle메서드,classList)

JS toggle메서드 사용하기

 

<div class="bread" onclick="toggleA()">
	식빵사기
</div>
<div class="workout" onclick="toggleB()">
	운동가기
</div>

화면모습(css준거)

.done {
      background-color: greenyellow;
      text-decoration: line-through;
    }

.not {
      background-color: tomato;
      text-decoration: overline;
    }

이렇게 css를 추가하고

 function toggleA() {
      document.querySelector(".bread").classList.toggle("done")
 }
 
 function toggleB() {
      document.querySelector(".workout").classList.toggle("not")
 }

toggle 메서드를 onclick이벤트로 넣어주면

onclick 이벤트 발생시 

onclick이벤트 발생시(toggleA()실행=>workout클래스에 not클래스 추가하기)

-> .not style적용

->다시 click하면

->not클래스 지워지면서 style없어지게 된다!