[JS] JS로 CSS 동적 변경하기

스타일을 변경할 때에는, 변경할 영역의 클래스 명을 바꿔주는 것이 좋다.
하지만 여러 개의 대한 관리는 classList속성을 변경시키는 것이 좋다.

뭔소리냐?

<ul  id="checkService hide">
        <li>계좌조회</li>
        <li>수표조회</li>
        <li>오픈뱅킹</li>
</ul>
<style>
  .hide{
  	display:none;
  }
  .checkServiceTest{
  	display:block;
  	color:red;
  }
</style>

다음과 같은 DOM을 특정 이벤트 발생 시 보이지 않게 만들고 싶다.
document.selectquery나 document.getElementbyTagName 등으로 요소 객체를 가져오고,
객체.style로 아예 객체의 style 속성을 바꿔줄 수 있다.

하지만 바꿔야하는 속성이 하나가 아니라면?
객체.style.color='red';
객체.style.display='block';
객체.style.textalign='center';
객체.style. .....

이런 과정을 무수히 반복해야 할 것이다.
하지만 하드코딩을 싫어하는 우리 개발자들은 이런 방법을 지양하도록 하자.

그러면 어떻게 해야할까?

Class 변경

아예, 바꿀 예정의 style을 적용한 class를 새로 만들고,
바꾸고 싶은 객체의 클래스에 이 class의 이름을 적용하면 되지 않을까???

className으로 스타일 동적 변경하기

const checkServiceElement = document.querySelector('.checkService');
checkServiceElement.className +=' checkServiceTest;
console.log(checkServiceElement.className); 
//checkService hide checkServiceTest

이런 식으로 바꾸고싶은 객체 클래스에,
미리 지정해둔 CSS가 적용된 클래스를 새로 달아줄 수 있다.
하지만 className은 배열이 아니라 문자열로, 새로운 클래스를 일일이 추가해야할 때

for(newClassName in newClasses){
	checkServiceElement.className+=' '+newClassName;
}

이런 식으로 띄어쓰기도 일일이 붙여줘야한다.

classList으로 스타일 동적 변경하기

좀 더 편리하게, 배열의 메서드를 이용해보자.
classList는 DOM 객체가 가지고있는 클래스의 이름들을 유사배열로 만든 것이다.

유사배열?

배열인듯 배열 아닌 얘들. 배열처럼 인덱스 활용이 가능하지만, 배열이 가진 일부 메서드들을 사용하지 못한다.
배열처럼 push,remove,replace등을 이용할 수는 있으나
forEach, map, filter, reduce 같은 메서드를 사용할 수 없다.

우리는 'hide' 클래스의 display:none을 붙였으므로,
이 hide 클래스만 제거해준다면, checkService class는 온전히 잘 보일 것이다.
따라서

checkServiceElement.classList.remove('hide');