[자바 스크립트] 13. 숨기기

Apr 04, 2025


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>숨기기</h1>
    <button onclick="hideDisplay()">display로 숨기기</button>
    <button onclick="hideVisible()">visible로 숨기기</button>
    <button onclick="empty()">박스내부 날리기</button>

    <div class="box" id="outterBox">
        <div class="box" id="innerBox1">
            내부박스1
        </div>
        <div class="box" id="innerBox2">
            내부박스2
        </div>
    </div>

    <script>
        function empty() {
            let el = document.querySelector("#outterBox");
            // el.innerHTML = "";
            // console.log(el.children);
            let cs = el.children;
            // cs[0].style.display = "none";

            // 유사배열 객체일 때 for문 사용 방법
            Array.from(cs).forEach(element => {
                element.style.display = "none";
            });
        }

        function hideDisplay() {
            let el = document.querySelector("#innerBox1");
            el.style.display = "none";
        }
        function hideVisible() {
            let el = document.querySelector("#innerBox2");
            el.style.visibility = "hidden";
        }
    </script>
</body>

</html>

[자바 스크립트] 13. 숨기기

디스플레이로 숨기기 했을 때

비저블로 숨기기 했을 때

박스 내부 날리기 했을 때