자바스크립트로 클릭시(onclick) 클래스(classList) 토글(toggle) 적용/ 찜버튼 만들기 예시

찜버튼 만들기

버튼클릭시 선택되고 해지 되는것을 표현하겠습니다.

 

html

 <button class="btn" onclick="toggleAct(this)">찜하기</button>

css

.btn {
    padding: 10px 20px;
    border: none;
    background-color: #f2f2f2;
    cursor: pointer;
}

.btn.act {
    background-color: #ff9800;
    color: white;
}

javascript

function toggleAct(button) {
    button.classList.toggle("act");
}

 

 

결과 🌈클릭해보세요 :)

 

 

See the Pen onclick, classList, toggle 찜버튼 만들기 by 김보라 (@etbeatbh-the-bashful) on CodePen.