JavaScript实现Div显示与隐藏

JavaScript实现Div显示和隐藏

要实现页面元素（如Div）的动态显示和隐藏，最直接的方法是使用JavaScript修改元素的CSS display 属性。当一个元素的 display 值设置为 none 时，该元素不会在页面上占用空间（即隐藏）；当设置为 block、inline 或 flex 等值时，元素则会正常显示。

下面是一个完整的 HTML 文件示例，展示了如何编写一个简单的函数来切换一个 Div 元素的可见状态。

核心实现原理

• 获取元素：使用 document.getElementById() 方法获取目标 Div 的 DOM 对象。
• 读取样式：访问元素的 style.display 属性来获取当前的显示状态。
• 切换状态：利用条件判断（if-else），如果当前是 block，则将其改为 none（隐藏）；否则改为 block（显示）。

第1步：编写 HTML 结构

创建一个按钮和一个隐藏的 Div。按钮绑定点击事件以触发 JavaScript 函数，Div 初始状态下设置 display:none。

<button id="toggleBtn" onclick="toggleVisibility('myDiv')">显示/隐藏</button>

<div id="myDiv" style="display: none; background-color: #ccc; width: 200px; height: 100px; margin-top: 10px;">
    这是一个隐藏的 Div
</div>

第2步：添加 JavaScript 逻辑

定义 toggleVisibility 函数，接收元素 ID 作为参数，执行切换逻辑。

<script>
function toggleVisibility(targetId) {
    var element = document.getElementById(targetId);
    if (element.style.display === 'none') {
        element.style.display = 'block'; // 显示元素
    } else {
        element.style.display = 'none'; // 隐藏元素
    }
}
</script>

完整可运行代码示例

将上述部分组合在一个 HTML 文件中，可以直接保存并在浏览器中打开测试。此示例不依赖任何第三方库，纯原生 JS 实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Toggle Div Example</title>
    <style>
        /* 预设样式，使效果更明显 */
        #exampleDiv {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            border: 1px solid blue;
            display: none; /* 初始隐藏 */
        }
        .info-text {
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <!-- 触发按钮 -->
    <button onclick="toggleDiv()">切换 Div 显隐</button>

    <!-- 目标 Div -->
    <div id="exampleDiv"></div>
    
    <p class="info-text">点击按钮查看效果。</p>

    <!-- JavaScript 逻辑 -->
    <script type="text/javascript">
        function toggleDiv() {
            var divElement = document.getElementById("exampleDiv");
            // 检查当前状态并翻转
            if (divElement.style.display === "none") {
                divElement.style.display = "block";
            } else {
                divElement.style.display = "none";
            }
        }
    </script>

</body>
</html>

注意事项

• 样式优先级：直接操作 element.style.display 是行内样式，具有极高的优先级，会覆盖 CSS 类（class）中定义的 display 属性。如果需要管理复杂的显示逻辑，建议使用 classList.add/remove() 配合 CSS 类来控制。
• 空值处理：在某些情况下（如样式完全由外部 CSS 定义且未通过 JS 初始化过 style.display），element.style.display 可能返回空字符串而非 none。严谨的代码应结合计算样式（如 window.getComputedStyle(element).display）进行判断。

以上就是基于原生 JavaScript 实现 Div 显示和隐藏的详细内容，更多关于 JavaScript DOM 操作的资料请关注本站其它相关文章！