JavaScript 控制 Div 显示与隐藏的两种核心方式：display 与 visibility
在网页前端开发中，动态控制元素的可见性是实现交互效果的基础技能。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>总结
选择哪种方式取决于业务需求。若希望布局随内容显隐而动态调整，请选择 display；若希望固定布局框架，仅做内容的淡入淡出式显隐，请选择 visibility。以上就是 JavaScript 隐藏显示 div 的详细内容，更多关于 JS 控制元素可见性的资料请关注本站其它相关文章！
本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
