[js] 4. 숨기기

Sep 05, 2024

바닐라


<!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>
    <div class="box">
        <div class="box" id="innerBox1">
            내부박스1
        </div>
        <div class="box" id="innerBox2">
            내부박스2
        </div>
    </div>
    <script>
        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>

display : none은 아예 나타나지 않는 것이고

visibility : hidden은 공간은 차지한 상태에 보이지만 않는 것이다.


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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <h1>숨기기</h1>
    <button onclick="hideDisplay()">display로 숨기기</button>
    <button onclick="hideVisible()">visible로 숨기기</button>
    <div class="box">
        <div class="box" id="innerBox1">
            내부박스1
        </div>
        <div class="box" id="innerBox2">
            내부박스2
        </div>
    </div>
    <script>
        function hideDisplay() {
            $("#innerBox1").hide();
        }

        function hideVisible() {
            $("#innerBox2").css("visibility", "hidden");
            // $("#innerBox2").remove();
        }
    </script>
</body>

</html>

See more posts

[js] 4. 숨기기

More articles

[js] 6. 추가하기

[js] 5. 나타내기

[js] 3. 이벤트 리스너

[js] 2. 함수와 람다식