[JAVASCRIPT]5.클래스 제어하기

728x90

html 마크업

#wrap article css 편집

자바스크립트로 박스안에 아쿠아색 클릭했을 때 핑크로 변경하기

변수 지정

아쿠아를 클릭하면 핑크로 변경된다.

 <script>
        // 변수 지정 
        const wrap = document.querySelector("#wrap")
        const box = document.querySelector("article")

        wrap.addEventListener("click",()=>{
            box.style.backgroundColor = "pink";
        });
    </script>

addClass = classList >> 클래스를 추가한다.

click하면 "on"이 발생하도록한다.

        wrap.addEventListener("click",()=>{
            wrap.classList.add("on");
        });

클래스가 없기 때문에 false가 뜬다.

wrap.addEventListener("click",()=>{
            wrap.classList.add("on");
            let isOn = wrap.classList.contains("on");
            console.log(isOn);
        });

클래스를 추가하면 true가 된다.

if문을 이용해서 자바스크립트에서 toggle키 만들기

 wrap.addEventListener("click",()=>{
            let isOn = wrap.classList.contains("on");

            // if문 >> toggle key 자바스크립트로 만들었다.
            if(isOn){
                wrap.classList.remove("on");
            }else{
                wrap.classList.add("on");
            }
        });

● classList.toggle: 토글 키

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>클래스 제어하기</title>
    <style>
        #wrap{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            padding: 100px;
            box-sizing: border-box;
            margin: 100px auto;
        }
        #wrap article{
            width: 100%;
            height: 100%;
            background-color: aqua;
            transition: all 0.5s;
        }

        #wrap.on article{
            background-color: pink;
        }
    </style>
</head>
<body>
    <section id="wrap">
        <article></article>
    </section>

    <script>
        // 변수 지정 
        const wrap = document.querySelector("#wrap")
        const box = document.querySelector("article")
       
        wrap/addEventListener("click",()=>{
            wrap.classList.toggle("on");
        });



        // wrap.addEventListener("click",()=>{
        //     let isOn = wrap.classList.contains("on");

        //     if문 >> toggle key 자바스크립트로 만들었다.
        //     if(isOn){
        //         wrap.classList.remove("on");
        //     }else{
        //         wrap.classList.add("on");
        //     }
        // });


        // wrap.addEventListener("click",()=>{
        //     wrap.classList.add("on");
        //     let isOn = wrap.classList.contains("on");
        //     console.log(isOn);
        // });


        // wrap.addEventListener("click",()=>{
        //     wrap.classList.add("on");
        // });



        // 클릭이벤트
        // wrap.addEventListener("click",()=>{
        //     box.style.backgroundColor = "pink";
        // });
    </script>
</body>
</html>

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션) (0)	2023.06.30
비주얼 스튜디오 코드 55_ parallax04 (0)	2023.06.29
비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자 (0)	2023.06.29
비주얼 스튜디오 코드 53_parallax03 (2)	2023.06.28
비주얼 스튜디오 코드 52_웹 표준)갤러리 이미지 넣기 (0)	2023.06.28