js 隐藏div

作者：◆丶依然如风发布日期:2025-05-20 浏览:82

<!DOCTYPE html>
<html>
<head>
    <title>隐藏 DIV 示例</title>
    <script>
        function hideDiv() {
            // 获取 ID 为 "myDiv" 的元素
            var div = document.getElementById("myDiv");
            // 将该元素的样式属性 display 设置为 "none"，从而隐藏它
            div.style.display = "none";
        }
    </script>
</head>
<body>
    <div id="myDiv" style="width:200px; height:100px; background-color:lightblue;">
        这是一个可以被隐藏的 DIV。
    </div>
    <button onclick="hideDiv()">点击隐藏 DIV</button>
</body>
</html>

解释说明：

document.getElementById("myDiv")：通过 ID 获取指定的 DOM 元素。
div.style.display = "none"：将该元素的 CSS 属性 display 设置为 "none"，使其在页面上不可见且不占用空间。
<button onclick="hideDiv()">点击隐藏 DIV</button>：创建一个按钮，当点击时调用 hideDiv() 函数来隐藏指定的 DIV。

上一篇：js div隐藏

下一篇：js display的属性