classList.replace()
classList.replace() 메서드는 선택한 요소의 클래스 이름을 변경합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다.
classList.replace()
classList.replace() 메서드는 선택한 요소의 클래스 이름을 변경합니다.
특징 | 설명 |
---|---|
버전(version) | ES1 |
결과값(return) | 클래스 이름 |
사용성 | ★★★☆☆ |
문법(Syntax)
"선택자".classList.replace("클래스 이름, 새로운 클래스 이름")
//클래스 이름 변경하기
documemt.querySelector("div").classList.replace("className1", "className2");
- 선택자(selector) : 클래스 이름을 삭제할 선택자를 설정합니다.
- 클래스 이름(class name) : 변경될 클래스 이름을 설정합니다.
- 새로운 클래스 이름(new class name) : 새롭게 변경될 클래스 이름을 설정합니다.
정의(Definition)
- classList.replace() 메서드는 선택한 요소의 클래스 이름을 변경합니다.
- classList는 읽기 전용 속성입니다.
클래스와 관련된 메서드(class Related method)
- classList.add() 메서드는 선택한 요소한테 클래스 이름을 추가합니다.
- classList.remove() 메서드는 선택한 요소한테 클래스 이름을 삭제합니다.
- classList.contains() 메서드는 선택한 요소한테 클래스가 있는지 확인하고 불린을 반환합니다.
- classList.toggle() 메서드는 선택한 요소한테 클래스를 추가/삭제합니다.
- classList.replace() 메서드는 선택한 요소의 클래스 이름을 변경합니다.
예제1(Sample)
selected 클래스를 active 클래스로 변경하는 예제입니다.
HTML
CSS
SCRIPT
<div class="jsample">
<div class="selected"><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/image11.jpg" alt="샘플이미지1"></div>
<div class="selected"><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/image12.jpg" alt="샘플이미지2"></div>
<div class="selected"><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/image13.jpg" alt="샘플이미지3"></div>
<div class="selected"><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/image14.jpg" alt="샘플이미지4"></div>
<div class="selected"><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%);
}
.jsample > div.active {
border: 5px solid #104a63;
position: relative;
box-sizing: border-box;
border-radius: 10px;
background: #2b88b0;
}
.jsample > div.active img {
opacity: 0.2;
}
.jsample > div.active::before {
content: 'active';
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.replace("active", "selected")
})
})
document.querySelector(".sampleBtn .btn1").addEventListener("click", (e) => {
e.preventDefault();
document.querySelectorAll(".jsample > div").forEach( el => {
el.classList.replace("selected", "active")
})
});
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
classList | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |