JS에서 class를 추가하는 방식이 있다.
바로 className과 classList를 사용하는 것이다.
className과 classList를 사용하여 class를 추가하여 특정 class에 대한 스타일을 지정할 수 있다.
: 해당 요소에 지정된 class 값
: className에 값을 대입하면 class 이름 전체가 바뀌어버린다.
const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick(){ if(h1.className === "active"){ h1.className = ""; } else{ h1.className = "active"; } } h1.addEventListener("click", handleTitleClick);
위 코드를 실행한 결과 JS는 HTML의 class 이름을 변경하고, CSS는 HTML을 통해 스타일을 변경한다.
하지만 기존 HTML의 h1 태그에 다른 이름의 클래스 이름을 가지고 있으면 문제가 발생한다.
<body> <div class = "hello"> <h1 class = "title">className ex</h1> </div> </body>
.title{ background-color: blue; font-weight: 800; }
다음과 같이 HTML의 h1에 title이라는 class이름이 주어져서 특정 스타일이 적용된다.
하지만 JS의 className으로 새로운 클래스 이름을 대입하면 기존의 title이라는 class name은 사라지게 되어 기존에 적용된 CSS 스타일도 적용이 되지 않는 문제가 발생한다.
따라서 기존 class 이름은 삭제되지 않고 모든 class name을 변경하지 않기 위해 classList를 사용할 수 있다.
: class들의 목록으로 작업할 수 있게 허용해준다.
: className의 이전 class를 상관하지 않고 모두 교체되어 발생하는 문제를 해결해준다.
class 이름 읽기
element.classList;
class 존재 확인
element.classList.contains("클래스 이름");
: 해당 클래스 이름이 존재하면 true를 반환, 존재하지 않으면 false를 반환한다.
class 추가
element.classList.add("클래스 이름");
※ className은 추가하려는 클래스가 존재하면 중복하여 추가하지만, classList를 이용하여 add로 추가할 경우 class 속성에 이미 있어도 중복하여 추가하지 않는다.
class 제거
element.classLsit.remove("클래스 이름");
classList.toggle
const h1 = document.querySelector("h1"); function handleClick(){ if(h1.classList.contains("active"){ h1.classList.remove("active"); } else{ h1.clssList.add("active"); } }
active 가 있으면 클래스 이름 active를 제거하고, 없으면 추가하는 위의 코드는 toggle을 이용하면 더 간략하게 표현 가능하다.
function handleClick(){ h1.classList.toggle("active"); }
toggle을 이용하면 if-else 조건문을 사용하지 않고 h1의 classList에 active가 있으면 제거하고 없으면 추가해주는 과정을 단 한줄로 수행해준다.
[JavaScript] classList 이용해 클래스 제어
JS에서 class를 추가하는 방식이 있다.
바로 className과 classList를 사용하는 것이다.
className과 classList를 사용하여 class를 추가하여 특정 class에 대한 스타일을 지정할 수 있다.
className
: 해당 요소에 지정된 class 값
: className에 값을 대입하면 class 이름 전체가 바뀌어버린다.
위 코드를 실행한 결과 JS는 HTML의 class 이름을 변경하고, CSS는 HTML을 통해 스타일을 변경한다.
하지만 기존 HTML의 h1 태그에 다른 이름의 클래스 이름을 가지고 있으면 문제가 발생한다.
다음과 같이 HTML의 h1에 title이라는 class이름이 주어져서 특정 스타일이 적용된다.
하지만 JS의 className으로 새로운 클래스 이름을 대입하면 기존의 title이라는 class name은 사라지게 되어 기존에 적용된 CSS 스타일도 적용이 되지 않는 문제가 발생한다.
따라서 기존 class 이름은 삭제되지 않고 모든 class name을 변경하지 않기 위해 classList를 사용할 수 있다.
classList
: class들의 목록으로 작업할 수 있게 허용해준다.
: className의 이전 class를 상관하지 않고 모두 교체되어 발생하는 문제를 해결해준다.
class 이름 읽기
class 존재 확인
: 해당 클래스 이름이 존재하면 true를 반환, 존재하지 않으면 false를 반환한다.
class 추가
※ className은 추가하려는 클래스가 존재하면 중복하여 추가하지만, classList를 이용하여 add로 추가할 경우 class 속성에 이미 있어도 중복하여 추가하지 않는다.
class 제거
classList.toggle
active 가 있으면 클래스 이름 active를 제거하고, 없으면 추가하는 위의 코드는 toggle을 이용하면 더 간략하게 표현 가능하다.
toggle을 이용하면 if-else 조건문을 사용하지 않고 h1의 classList에 active가 있으면 제거하고 없으면 추가해주는 과정을 단 한줄로 수행해준다.
'Front-End > JavaScript' 카테고리의 다른 글