728x90
728x90
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <head> ... <style> .like--heart { font-size: 100px; color: gray; cursor: pointer; } /* like--heart와 liked 클래스를 모두 가진 요소에 대해 적용 */ .like--heart.liked { color: red; } </style> </head> <body> // HTML 심볼 활용 <span class="like--heart" onclick="likeToggle()">❤</span> <script> function likeToggle() { let likeHeart = document.querySelector(".like--heart"); // 누를 때마다 liked 클래스가 생성됐다가 제거됐다가 토글로 likeHeart.classList.toggle('liked'); // 콘솔의 DOMTokenList --> 사용할 수 있는 메서드 확인 가능 } </script> </body> | cs |
320x100
반응형
'Code > Web' 카테고리의 다른 글
| [JavaScript Code] AJAX 통신을 이용해서 데이터 가져오기 (0) | 2023.05.09 |
|---|---|
| [Spring Code] 암호화 처리를 이용한 회원가입과 로그인 (0) | 2023.04.22 |
| [Spring Code] DAO - Service - Controller 구조 예시 (0) | 2023.04.20 |
| [Spring Code] 인터셉터 구현 예시 (0) | 2023.04.13 |
| [Spring Code] REST API - Controller 구현 예시 (0) | 2023.04.10 |
댓글