classList.toggle()
classList.toggle() 메서드는 선택한 요소한테 클래스를 추가/삭제합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다.
classList.toggle()
classList.toggle() 메서드는 선택한 요소한테 클래스를 추가/삭제합니다.
특징 | 설명 |
---|---|
버전(version) | ES1 |
결과값(return) | 클래스 추가/삭제 |
사용성 | ★★★★★ |
문법(Syntax)
"선택자".classList.toggle("클래스 이름")
"선택자".classList.toggle("클래스 이름", "클래스 이름",....)
//클래스 이름을 추가하는 경우
documemt.querySelector("div").classList.toggle("className");
//클래스 이름을 여러개 사용하는 경우
documemt.querySelector("div").classList.toggle("className1, className2");
- 선택자(selector) : 클래스 이름을 삭제할 선택자를 설정합니다.
- 클래스 이름(class name) : 삭제할 클래스 이름을 설정합니다.
정의(Definition)
- classList.toggle() 메서드는 선택한 요소한테 클래스를 추가/삭제합니다.
- classList는 읽기 전용 속성입니다.
클래스와 관련된 메서드(class Related method)
- classList.add() 메서드는 선택한 요소한테 클래스 이름을 추가합니다.
- classList.remove() 메서드는 선택한 요소한테 클래스 이름을 삭제합니다.
- classList.contains() 메서드는 선택한 요소한테 클래스가 있는지 확인하고 불린을 반환합니다.
- classList.toggle() 메서드는 선택한 요소한테 클래스를 추가/삭제합니다.
- classList.replace() 메서드는 선택한 요소한테 클래스 이름을 변경합니다.
비교(Compare)
- jQuery에서 클래스 삭제는 removeClass()를 사용합니다.
- Javascript에서 클래스 추가는 classList.remove()를 사용합니다.
예제1(Sample)
이미지를 클릭하면 선택/해제되는 예제입니다.
이미지를 클릭하면 선택/해제 됩니다.
HTML
CSS
SCRIPT
<div class="jsample">
<div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/image11.jpg" alt="샘플이미지1"></div>
<div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/image12.jpg" alt="샘플이미지2"></div>
<div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/image13.jpg" alt="샘플이미지3"></div>
<div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/image14.jpg" alt="샘플이미지4"></div>
<div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/image15.jpg" alt="샘플이미지5"></div>
</div>
.jsample {
overflow: hidden;
}
.jsample > div {
float: left;
width: 18%;
margin: 1%;
border: 5px solid transparent;
box-sizing: border-box;
}
.jsample > div img {
width: 100%;
margin: 0;
border-radius: 3px;
}
.jsample > div.selected {
border: 5px solid #7d0f2a;
position: relative;
box-sizing: border-box;
border-radius: 10px;
background: #b02b4c;
}
.jsample > div.selected img {
opacity: 0.2;
}
.jsample > div.selected::before {
content: 'selected';
position: absolute;
left: 50%; top: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
document.querySelector(".sampleBtn .reset").addEventListener("click", function(e){
e.preventDefault();
document.querySelectorAll(".jsample div").forEach(el => {
el.classList.remove("selected");
});
})
document.querySelectorAll(".jsample > div").forEach((el)=>{
el.addEventListener("click", function(e){
e.preventDefault();
this.classList.toggle("selected");
});
});
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
classList | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |