[자바스크립트] 클래스를 이용한 메서드
제이쿼리로 하면 간단한데, 자바스크립트로는 자주 사용해보지 않아서 정리보면 공부가 될것 같아 적어보려 합니다.
- element.className
클래스 이름을 가지고옴
ex ) <div id="id" class="box01"></div>
|
1
2
3
4
5
|
document.getElementById('id').className
// "box01"
|
cs |
- element.classList
element.classList 자체는 읽기 전용 property지만 add()와 remove() 메서드를 이용하여 변형할 수 있다.
ex)
|
1
2
3
4
5
|
document.getElementById('id').classList
//[object DOMTokenList]: {0: "box01", length: 1, value: "box01"}
|
cs |
- element.classList.remove()
설정한 클래스 값을 제거한다.
ex)
|
1
2
3
4
5
|
document.getElementById('id').classList.remove("box01")
//클래스가 제거됨
|
cs |
- element.classList.add()
설정한 클래스 값을 추가한다.
ex)
|
1
2
3
4
5
|
document.getElementById('id').classList.add("box02")
//클래스가 새로 추가됨
//<div class="box01 box02"></div>
|
cs |
- element.classList.item(number)
인덱스 숫자에 맞는 클래스 값을 반환한다. (0부터 시작)
ex)
<div id="id" class="box01 box02 box03"></div>
|
1
2
3
4
|
document.getElementById('id').classList.item(1);
//"box02"
|
cs |
- element.classList.toggle( String [, force])
클래스 값을 토글링한다. 클래스 값이 추가하고 true를 반환 또는 클래스값을 제거하고 false를 반환한다.
ex) <div id="btn"></btn>
<div id="id" class="box01"></div>
|
1
2
3
4
5
|
document.getElementById('btn').addEventListener("click", function () {
})
//처음누를때 <div id="id" class="box01 new01"></div>
//두번째 누를때 <div id="id" class="box01"></div>
|
cs |
div.btn를 누를때 "new01"의 클래스 값이 토글링한다.
- element.classList.contains(string)
특정 클래스가 있는지 확인한다. true/ false로 반환한다.
ex)
|
1
2
|
document.getElementById('id').classList.contains("new01");
//false
|
cs |
- element.classList.replace(oldclsss, newclass)
특정 클래스를 새로운 클래스로 변경한다.
ex)
|
1
2
|
document.getElementById('id').classList.replace( "box1", "new01");
//<div class="new01"></div>
|
cs |
참고 출처: https://developer.mozilla.org/ko/docs/Web/API/Element/classList
*브라우저마다 사용불가능한 메서드들이 있다.