클래스 변경은 자바스크립트를 통해 자주 사용되는 동작이기에 잘 알아둘 필요가 있습니다.
자바스크립트에서 클래스를 변경하는 방법은 두가지 입니다.
1. className
태그.className = "변경할 클래스 이름";
위와 같이 코드를 작성하면 해당 태그의 클래스 값이 아예 변경 됩니다.
2. classList
classList 를 사용하면 클래스 전체를 변경하지 않고 메서드를 사용하여 클래스를 한개씩 추가하거나 삭제하거나 할 수 있습니다.
- 태그.classList.add("hello") : 이렇게 코드를 작성하면 해당 태그에 hello 라는 클래스를 추가 할 수 있습니다.
- 태그.classList.remove("hello") : 해당 태그의 hello 라는 클래스를 삭제 할 수도 있습니다.
- 태그.classList.toggle("hello") : toggle 메서드는 해당 태그에 hello 클래스가 존재 할 경우 제거하고 없는 경우에는 추가 합니다.
- 태그.classList.contains("hello") : 해당 태그에 hello 라는 클래스가 있다면 true, 없다면 false 를 반환 합니다.
