스타일변경(객체이용)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.4.min.js"></script>

    <style>
        .change{
            color:yellow;
            background-color: pink;
        }
    </style>
</head>
<body>

    <h1 id="h1Tag">양고기 리무진</h1>
    <button id="btn">스타일 변경</button>
    
    <script>
        // // 버튼을 클릭하면,h1태그의 디자인을 수정
        // document.getElementById('btn').addEventListener("click", () => {
        //     // 1. 스타일을 바꿔줄 요소를 가져오기
        //     let h1Tag = document.getElementById('h1Tag');

        //     // 1-1. 내가 가져온 요소가 어떤 스타일을 가지고 있지?
        //     console.log(h1Tag.style);

        //     // 1-2. 색깔 속성만 보고싶으면
        //     console.log(h1Tag.style.color);
        //     h1Tag.style.color = 'yellow';
        //     h1Tag.style.background = 'pink';
        // });

        // jQuery 이용
        $('#btn').click(function(){
            $('#h1Tag').toggleClass('change');
        })

        

    </script>
</body>
</html>