JavaScript 控制 Div 显示与隐藏的两种核心方式：display 与 visibility

方予

发布时间：2026-10-15| 6人浏览过

原创

在网页前端开发中，动态控制元素的可见性是实现交互效果的基础技能。JavaScript 主要提供两种 CSS 样式操作路径来实现 div 的隐藏与显示：style.display 与 style.visibility。理解两者的本质区别对于优化页面布局和用户体验至关重要。

核心原理与区别分析

虽然两者都能实现元素的视觉隐藏，但其对文档流的影响截然不同：

display: none / block：当设置为 none 时，元素从渲染树中完全移除，不再占用任何页面空间；设置为 block 或 inline 等值时，元素重新占据空间并渲染。
visibility: hidden / visible：当设置为 hidden 时，元素虽然在视觉上不可见，但仍在文档流中保留其原始位置和尺寸，不会影响周围元素的布局。

第一种方案：使用 display 属性

此方法适用于需要彻底释放元素所占空间的场景，如手风琴菜单、模态框开关等。

具体操作逻辑如下：

获取元素：通过 document.getElementById() 定位目标 div。
设置隐藏：将 style.display 赋值为 'none'。
设置显示：将 style.display 赋值为 'block'（针对块级元素）或其他合适值。

var t = document.getElementById('test'); // 选取id为test的div元素
t.style.display = 'none';     // 隐藏选择的元素，不占位置
t.style.display = 'block';    // 以块级样式显示，恢复占位

第二种方案：使用 visibility 属性

此方法适用于需要保持界面结构稳定，仅临时隐藏内容的场景，如表单验证结果的暂隐、加载状态下的内容遮挡等。

具体操作逻辑如下：

获取元素：同上，定位目标元素。
设置隐藏：将 style.visibility 赋值为 'hidden'。
设置显示：将 style.visibility 赋值为 'visible'。

var t = document.getElementById('test'); // 选取id为test的div元素
t.style.visibility = 'hidden'; // 隐藏元素，但仍占位置
t.style.visibility = 'visible'; // 显示元素

视觉效果对比演示

为了直观展示两种方式的差异，我们通过实际案例进行观察。以下图片展示了同一 div 元素在执行不同隐藏操作后的页面状态变化。

初始状态： div 正常显示，包含边框和文本内容。

display 方式效果演示：

点击“隐藏”按钮执行 display = 'none' 后，div 消失，下方内容立即上移填补空位，证实该方式不占用原来的位置。

visibility 方式效果演示：

点击“隐藏”按钮执行 visibility = 'hidden' 后，div 区域变白或透明但原位置依旧存在，下方内容未发生位移，证实该方式隐藏后仍然占据原来的位置。

完整交互式示例代码

以下代码整合了 HTML 结构与 JavaScript 函数，实现了两个按钮分别控制 div 的显示与隐藏，供开发者直接参考或嵌入项目中使用。

<head>
    <script type="text/javascript">
        // 控制 display 属性的切换
        function fn1(){
            var t = document.getElementById('test');
            if(t.style.display === 'none') {
                t.style.display = 'block'; // 显示
            } else {
                t.style.display = 'none';  // 隐藏
            }
        }

        // 控制 visibility 属性的切换
        function fn2(){
            var t = document.getElementById('test');
            if(t.style.visibility === 'hidden') {
                t.style.visibility = 'visible'; // 显示
            } else {
                t.style.visibility = 'hidden';  // 隐藏
            }
        }
    </script>
</head>

<body>
    <div id="test" style="border: solid 1px #e81515; width:500px; padding:10px;">
        这是一个将要隐藏的DIV。
        <br>这是一个将要隐藏的DIV。
        <br>这是一个将要隐藏的DIV。
        <br>这是一个将要隐藏的DIV。
    </div>

    <br><br>
    <button onclick="fn1()">使用 Display 切换</button>
    <button onclick="fn2()">使用 Visibility 切换</button>
</body>