[javaScript] 클릭 시 클래스 명 변경 되는 자바스크립트

 

클릭시 자동으로 아이콘의 클래스 명이 변경되게 하는 
소스 입니다. 

아이디 저장 과 같은 기능뿐 아니라, 
클래스 명이 토글 형태로 변경 되어야 하는 부분에 사용할때 
가능 합니다. 

 

 

 

*방법 : 폰트 아이콘의 클래스명을 제어해서 아이콘 모양을 변경해줍니다!  

 

html

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"> <!-- 폰트아이콘 불러오기 -->

<div class="login_save">
  <i class="xi-check-circle-o" id="staylogin"> 아이디 저장</i>
</div>

css

.login_save{
  margin:3em
}
.login_save i{
  font-size: 26px;
  padding-right:3px;
  cursor:pointer;
  font-weight:400;
  color:#999;
  letter-spacing: -1px;
}
.login_save i.xi-check-circle{
  color:#000
}

JavaScript

const logo = document.getElementById("staylogin");
let clicked = 0;
logo.onclick = function(){
  if(clicked){
    logo.className = "xi-check-circle-o";
    clicked = 0;
  }else{
    logo.className = "xi-check-circle";
    clicked = 1;
  }
}

 

result

 

결과물을 직접 클릭해 보면,
클릭할때마다 클래스 명이 바뀌어서 
색이 달라지는 것을 확인 할 수 있습니다~