자바스크립트를 이용한
toggle 메서드의 사용을 알아보겠습니다.
toggle()
토글이란,
on/off switch의 개념으로 스위치를 켰다, 껐다 하는 기능을 가지고 있습니다.
add()와 remove() 메서드를 한번에 쓸 수 있는 합쳐진 개념입니다.
보통 click 이벤트에 classList를 이용하여 toggle로
css로 style을 준 클래스명을 on/off 처리합니다.
참고: class 아니고, classList 입니다.
변수명.addEventListener('click', function() {
변수명.classList.toggle('클래스명');
});add()
지정한 클래스 값을 추가합니다.
변수명.addEventListener('click', function() {
변수명.classList.add('클래스명');
});remove()
지정한 클래스 값을 제거합니다.
참고: 존재하지 않는 클래스를 제거하는 것은 에러를 발생시키지 않습니다.
변수명.addEventListener('click', function() {
변수명.classList.remove('클래스명');
});
예제
<html>
<div class="card c1">toggle</div>
<div class="card c2">add</div>
<div class="card c3 flipped">remove</div>
<css>
.card {
display: inline-block;
width: 100px;
height: 100px;
border: 3px solid #dedede;
margin-right: 20px;
margin-bottom: 20px;
transition: transfrom 0.8s;
text-align: center;
}
.c1 {
background: skyblue;
}
.c2 {
background: pink;
}
.c3 {
background: beige;
}
.flipped {
background: orange;
}
<script>
let c1 = document.querySelector('.c1');
let c2 = document.querySelector('.c2');
let c3 = document.querySelector('.c3');
c1.addEventListener('click', function() {
c1.classList.toggle('flipped');
});
c2.addEventListener('click', function() {
c2.classList.add('flipped');
});
c3.addEventListener('click', function() {
c3.classList.remove('flipped');
});
화면 결과
반응형
'개발 > Javascript' 카테고리의 다른 글
| [js] 피셔 예이츠 셔플, 알고리즘 (0) | 2021.02.13 |
|---|---|
| [js] 자바스크립트로 카드 뒤집기 게임 구현하기(카드 세팅 ver.1) (0) | 2021.02.13 |
| [js] 자바스크립트로 틱택토(심화버전) 구현하기 (0) | 2021.01.10 |
| [js]자바스크립트 스코프, 클로저(ft. 지역/글로벌/렉시컬 scope) (0) | 2021.01.08 |
| [js] 자바스크립트로 반응속도 테스트 구현 (0) | 2021.01.03 |
댓글