[JavaScript] 15. 쿼리 셀렉트문과 클래스 선택자

Song hyun 2024. 8. 1. 09:46

728x90

[JavaScript] 15. 쿼리 셀렉트문과 클래스 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        display:flex;
        justify-content:center;
    }
    .like-heart{
        font-size:40px;
        color:gray;
        cursor: pointer;
    }
    .like-heart.liked{
        font-size:60px;
        color:red;
        cursor: pointer;
    }
</style>
<body>
    <span class="like-heart" onclick="likeToggle()">	&#9825;</span>
    <span class="like-heart" onclick="likeToggle()">	&#9825;</span>
    <span class="like-heart" onclick="likeToggle()">	&#9825;</span>
    <script>
        function likeToggle(){
            let likeHeart=document.querySelector(".like-heart");
            console.log("likeHeart",likeHeart);
            console.log(typeof likeHeart);
            console.log(likeHeart);
            likeHeart.style.fontSize="40px";
            // 토글 기능 ---> 상태값 저장을 위한 변수라는 개념 필요!
            // 부정 ---> 삼항연산자
            likeHeart.classList.toggle("liked");
        }

        // 확인
        // let elements=document.getElementById("example");
        // console.log(elements);
        // console.log(typeof elements);

        // Node, NodeList, HTMLCollection 
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        display:flex;
        justify-content:center;
    }
    .like-heart{
        font-size:40px;
        color:gray;
        cursor: pointer;
    }
    .like-heart.liked{
        font-size:60px;
        color:red;
        cursor: pointer;
    }
</style>
<body>
    <span class="like-heart" onclick="likeToggle(this)">	&#9825;</span>
    <span class="like-heart" onclick="likeToggle(this)">	&#9825;</span>
    <span class="like-heart" onclick="likeToggle(this)">	&#9825;</span>
    <script>
        function likeToggle(el){
            el.classList.toggle("liked");
        }

        // 확인
        // let elements=document.getElementById("example");
        // console.log(elements);
        // console.log(typeof elements);

        // Node, NodeList, HTMLCollection 
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        display:flex;
        justify-content:center;
    }
    .like-heart{
        font-size:40px;
        color:gray;
        cursor: pointer;
        transition: color 1s ease,transform 1s ease;
    }
    .like-heart.liked{
        color:red;
        cursor: pointer;
        /* css로 애니메이션 효과 만들기 */
        transform: scale(1.5);
    }
</style>
<body>
    <span class="like-heart" onclick="likeToggle(this)">	&#9825;</span>
    <span class="like-heart" onclick="likeToggle(this)">	&#9825;</span>
    <span class="like-heart" onclick="likeToggle(this)">	&#9825;</span>
    <script>
        function likeToggle(el){
            el.classList.toggle("liked");
        }

        // 확인
        // let elements=document.getElementById("example");
        // console.log(elements);
        // console.log(typeof elements);

        // Node, NodeList, HTMLCollection 
    </script>
</body>
</html>

728x90