[js]classList 사용방법

자바스크립트를 이용해서 온오프 제어하려면 2가지 방법이 있습니다.

1.style을 이용하는 방법
2.class를 이용하는 방법

오늘은 2번의 방법을 사용해보려고 합니다.
1번의 경우는 빠르게 기능 테스트할때만 쓰는 편인데 아무래도 단편적인 기능뿐이 안되겠죠.

아주아주 간단한 예제를 만들었으니 쉽게 따라하실 수 있을겁니다.
VSCode를 열고 다음과 같이 입력합니다.

 

html

먼저 뼈대를 구성합니다.

<!-- 버튼 제어할 영역 -->
<div class="press-wrap">
	<button onClick="dev_onoff()">ON/OFF Test</button>
</div>

<!-- 결과 보여지는 영역 -->
<div class="view"></div>

 

css

버튼을 눌렀을때마다 다른 결과를 제공할 css도 만들어줍니다.

.view{
  width: 100%;
  height: 100px;
  margin-top: 20px;
  background: blue;
}

.view.on{
  background: red;
}

 

javascript

이제 버튼을 누를때마다 토글기능이 작동하도록 해줘야겠죠?

var view = document.querySelector('.view'); //타겟 설정
var cnt = 0; //토글 제어할 변수

function dev_onoff(){
  if(cnt==0){
    view.classList.add('on');
    cnt++;
  }
  else{
    view.classList.remove('on');
    cnt--;
  }
}

 

최종 소스

https://jsbin.com/hagupalelo/edit?html,css,js,output 여기에서 확인하시면 됩니다.

다음 포스팅에서 뵐게요~