210403 JavaScript jQuery 이벤트 연습_2

ITisIT210·2021년 4월 3일
0

jQuery

목록 보기
7/142
post-thumbnail
<!DOCTYPE html>
<html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style>
            div {
                width: 100px;
                height: 100px;
                background-color: green;
                margin: 50px auto;
            }
            /* body {
                background-color: red;
                 margin: 0;
            }
            .cover {
                 height: 100%;
            } */
            </style>
    </head>
    <boby>
        <div></div>
        <script src="js/jquery-3.6.0.min.js"></script>   
        <script>
            // div 클릭하면 배경색 red
            // 다시 한번 클릭하면 원래 색상으로

            var toggle = true;

            $("div").on("click", function(){
                if(toggle == true){
                    $(this).css("backgroundColor", "red");
                } else {
                    $(this).css("backgroundColor", "green");
                }
                toggle = !toggle;
            })

            //console.log(typeof(onClick));

            // var reClick = $("div").on("click", function(){
            //     $(this).css("backgroundColor", "green");
            // });

        </script>
    </boby>
    </html>
profile
Engineering is the closest thing to magic that exists in the world.

0개의 댓글