클릭시 자동으로 아이콘의 클래스 명이 변경되게 하는
소스 입니다.
아이디 저장 과 같은 기능뿐 아니라,
클래스 명이 토글 형태로 변경 되어야 하는 부분에 사용할때
가능 합니다.
*방법 : 폰트 아이콘의 클래스명을 제어해서 아이콘 모양을 변경해줍니다!
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
결과물을 직접 클릭해 보면,
클릭할때마다 클래스 명이 바뀌어서
색이 달라지는 것을 확인 할 수 있습니다~
728x90
반응형
'퍼블리싱' 카테고리의 다른 글
[jQuery]셀렉트박스+제이쿼리, 셀렉트 선택 시 내용 보여지게 (0) | 2024.02.22 |
---|---|
[jQuery] mouseenter , mouseleave 마우스 호버 효과 - 마우스 엔터 (0) | 2024.01.31 |
[js/css] 스크롤바 커스텀 디자인 mCustomScrollba, 스타일 플러그인 (0) | 2023.11.24 |
[css]구글 아이콘 웹폰트 사용방법 (2) | 2023.11.23 |
[css] 말줄임 표시 방법 , 1줄 or 2줄 일때 (0) | 2023.11.22 |
댓글