[Javascript] className, classList, 그리고 toggle!

자바스크립트에서 style를 바꾸고 싶을 때 바로. style로 변경해도 되지만, 코드도 길어지고 무엇보다 JS파일에서 CSS를 쓰고 있다는 게 마음에 걸린다. 이럴 때는 미리 css 파일에 변경해둘 스타일을 지정된 이름으로 선언해두고 자바스크립트에서 class를 변경만 해주면 된다!

 

1. className 

className은 HTML에서 불러온 Element의 class 이름을 css에서 지정한 선택자 이름으로 변경한다. 

Element를 가져오는 것은 document.getElementsByClassName이나 querySelector로 가져온다.

// Javascript
function changeStyle() {
	가져온Element.className = "변경할 이름";
}

// CSS
.변경할 이름 {
	color: "white";
}

그러나 이 방법은 하나의 요소에 여러 class 이름이 있는 경우 가지고 있던 class 이름들을 모두 잃어버리게 된다. 즉, 내용을 덮어쓰듯이 변경하려는 하나의 class 이름만 남게 된다. 

 

 

2. classList

classList는 class 이름을 그룹으로 관리해준다. 여기서는 덮어쓰듯이 변경하는 것이 아니라 add, remove와 같이 추가, 삭제하는 방법으로 불편함을 해소할 수 있다.

// Javascript
function addStyle() {
	가져온Element.classList.add = "변경할 이름";
}
function removeStyle() {
	가져온Element.classList.remove = "변경할 이름";
}

물론 위 코드만 작성하면 안되고 조건문을 통해 판별하는 작업을 거쳐야 제대로 사용할 수 있다. 여기서 classList에 존재하는 contains를 사용하면 편리한데, 인자로 주어진 이름이 해당 classList에 존재한다면 true를, 존재하지 않는다면 false을 반환한다.

// Javascript
function addorremove() {
	if (가져온Element.classList.contains("변경할 이름")) {
    	// 포함되어 있으면 삭제.
    	가져온Element.classList.remove("변경할 이름");
    } else {
    	// 포함되지 않으면 추가.
		가져온Element.classList.add("변경할 이름");
	}
}

 

 

3. toggle

classList 방식도 좋지만, toggle은 코드를 훨씬 간결하게 줄여준다. 위에서 작성한 addorremove()의 동작대로 수행해 주는데, 단 한 줄이면 된다.

// Javascript
function useToggle() {
	가져온Element.classList.toggle("변경할 이름");
}

 

 

 

---

더 많고 자세한 내용은 아래 링크에서 확인할 수 있다!

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList