[자바 스크립트] 14. 나타내기

Apr 04, 2025


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

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

        #innerBox1 {
            display: none;
        }

        #innerBox2 {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <h1>나타내기</h1>
    <button onclick="showByDisplay()">display로 나타내기</button>
    <button onclick="showByVisible()">visible로 나타내기</button>
    <div class="box" id="outerBox">
        <div class="box" id="innerBox1">
            내부박스1
        </div>
        <div class="box" id="innerBox2">
            내부박스2
        </div>
    </div>

    <script>
        function showByDisplay() {
            let el = document.querySelector("#innerBox1");
            el.style.display = "block";
        }
        function showByVisible() {
            let el = document.querySelector("#innerBox2");
            el.style.visibility = "visible";
        }
    </script>
</body>

</html>

디스플레이로 나타내기

[자바 스크립트] 14. 나타내기

디스플레이로 나타내기

비저블로 나타내기

More articles

[자바 스크립트] 16. 삭제하기

[자바 스크립트] 15. 추가하기

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

[자바 스크립트] 12. 로그인 이벤트