js- classList

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList - Web API | MDN

<classList 문서>

 

 

classList 함수를 사용해서 html요소에 class속성을 관리할 수 있다. 

 

---

classList 메서드

 

1. add ("className ")

• 인수로 전달한 1개 이상의 문자열을 class 목록에추가한다.

main.classList.add('one');  // class='one'
main.classList.add('two','thr','fou'); // class='one two thr fou'

 

2. remove ("className ")

• 인수로 전달한 1개 이상의 문자열과 일치하는 클래스를 class목록에서 삭제한다
• 인수로 전달한 문자열과 일치하는 클래스가 class 목록에 없으면 무시된다.

main.classList.remove('one');  // class='two thr fou'
main.classList.remove('two','thr'); // class=' fou'

 

3.contains ("className ")

• 인수로 전달한 문자열과 일치하는 클래스가 class목록에 포함되어 있는지 확인한다

main.classList.contains('one');  // false
main.classList.contains('fou'); // true

 

4.replace ("oldClassName", "newClassName")

• 첫 번째로 전달한 문자열을 두 번째로 전달한 문자열로 변경한다

main.classList.replace('fou','fiv');  // class = 'fiv'

 

5.toggle("className")

• class목록에 인수로 전달한 문자열과 일치하는 클래스가 존재하면 제거하고 존재하지 않으면 추가한다. 

main.classList.toggle('one')