[javascript] 아주 간단한 class toggle 만들기

제이쿼리를 사용하면 toggleclass 나 addClass , removeClass 등 스타일링을 간단하게 변환할 수 있지만 바닐라 js에서는 document객체 를 이용해 className을 스트링으로 제어해야 한다. 

 

logo 클릭 전

logo 클릭 후

로고 다시 클릭 후

 

해당 헤드에 대한 html 과 css 정보는 https://hokeydokey.tistory.com/33 이 링크에서 받을 수 있다. 

 

span 추가하기 

jasmin 이 div안에 있는데 우리가 기대하는건 logo를 클릭했을때 컬러의 색상이 변경해야 함으로 logo를 span으로 감싸준다. 

 

<script> 위치 선정

html 페이지의 정보를 변경하기위해 js의 document객체를 이용해야 한다. 만약 head에 script를 적고 document객체를 사용한다면 

사용이 제대로 되지 않을 것이다. 이유는 브라우저가 html파일을 읽을때는 위에서 아래로 읽는데 head에 script 를 선언하고 document객체를 사용해 getElementById 같은걸 사용하면 아직 dom 트리가 만들어지기 전이니 해당 요소를 찾지 못한다. 그러므로 body태그 아래에 script를 선언한다. 

 

 

</body>
<script>

</script>

 

로직 구상 하기 

span 태그를 건들면 해당 로고의 색상이 변경되어야 한다. 그럼 우리가 필요한 것들은 document.getElementById()로 해당 요소를 가져온다음 onclick 이벤트로 해당 요소의 .className 프로퍼티에 값을 변경해야 한다. 토글 클래스를 적용하기 위해서는 clicked라는 변수를 생성하고 클릭할때 마다 이 변수의 값을 1과 0으로 변경하고 값에 따라 다른 클래스를 두어야 한다.

 

실천하기 

<script>
  const logo = document.getElementById("logo_span");
  let clicked = 0;
  logo.onclick = function(){
    if(clicked){
      logo.className = "red";
      clicked = 0;
    }else{
      logo.className = "yellow";
      clicked = 1;

    }
  }
</script>