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()">&#10084;</span>
    <script>
        function likeToggle() {
            let likeHeart = document.querySelector(".like--heart");
 
            // 누를 때마다 liked 클래스가 생성됐다가 제거됐다가 토글로
            likeHeart.classList.toggle('liked'); 
            // 콘솔의 DOMTokenList --> 사용할 수 있는 메서드 확인 가능
        }
    </script>
</body>
cs

 

 

 

320x100
반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] 비동기 통신 기초 : Promise 타입  (0) 2023.05.09
[JavaScript] AJAX 통신을 이용해서 데이터 가져오기  (0) 2023.05.09
[JavaScript] BOM : document 객체 ★  (0) 2023.05.08
[JavaScript] HTML 렌더링과 JavaScript 실행  (0) 2023.05.08
[JavaScript] 이벤트  (0) 2023.05.08

티스토리툴바