在网页交互开发中，动态控制div元素的显示与隐藏是非常常见的需求，比如点击按钮展开收起内容区域、切换不同模块的展示状态等。实现这个效果的核心是通过JavaScript操作div元素的样式属性，或者封装通用的切换方法。
通过display属性切换div显示隐藏
display是控制元素布局显示的核心CSS属性，当设置值为none时，元素会被完全隐藏且不占据布局空间；设置值为block或者其他符合元素特性的显示值时，元素会重新展示。我们可以通过按钮点击事件修改目标div的display属性来实现切换。
首先编写基础的HTML结构，包含一个控制按钮和一个需要切换显示状态的div：
<button id="toggleBtn">切换div显示隐藏</button>
<div id="targetDiv" style="width: 200px; height: 100px; background-color: #f0f0f0; margin-top: 10px;">
这是需要切换显示隐藏的div内容
</div>
接下来编写JavaScript逻辑，点击按钮时判断当前div的display状态，然后切换对应的值：
// 获取按钮和目标div元素
const toggleBtn = document.getElementById('toggleBtn');
const targetDiv = document.getElementById('targetDiv');
// 绑定点击事件
toggleBtn.addEventListener('click', function() {
// 获取当前div的display样式值，注意如果是行内样式直接取style.display，非行内样式需要用getComputedStyle
const currentDisplay = window.getComputedStyle(targetDiv).display;
// 判断当前显示状态，切换display值
if (currentDisplay === 'none') {
targetDiv.style.display = 'block';
} else {
targetDiv.style.display = 'none';
}
});
封装通用的toggle切换方法
如果页面中有多个div需要实现显示隐藏切换，重复编写判断逻辑会显得冗余，我们可以封装一个通用的toggle方法，接收目标元素作为参数，自动完成状态的切换。
首先调整HTML结构，增加第二个需要切换的div：
<button class="toggle-btn" data-target="div1">切换第一个div</button>
<div id="div1" style="width: 200px; height: 100px; background-color: #e8f4ff; margin: 10px 0;">
第一个可切换的div
</div>
<button class="toggle-btn" data-target="div2">切换第二个div</button>
<div id="div2" style="width: 200px; height: 100px; background-color: #ffe8e8; margin: 10px 0;">
第二个可切换的div
</div>
然后封装toggle方法，并给所有控制按钮绑定统一的事件：
// 封装通用的toggle切换方法
function toggleDisplay(element) {
if (!element) return;
const currentDisplay = window.getComputedStyle(element).display;
element.style.display = currentDisplay === 'none' ? 'block' : 'none';
}
// 获取所有切换按钮
const toggleBtns = document.querySelectorAll('.toggle-btn');
// 遍历按钮绑定事件
toggleBtns.forEach(btn => {
btn.addEventListener('click', function() {
// 通过data-target属性获取目标div的id
const targetId = this.getAttribute('data-target');
const targetElement = document.getElementById(targetId);
// 调用toggle方法切换状态
toggleDisplay(targetElement);
});
});
两种实现方式的对比
我们可以通过表格对比两种实现方式的特点，方便根据场景选择：
| 实现方式 | 优点 | 适用场景 |
|---|---|---|
| 直接修改display属性 | 逻辑简单，容易理解，适合单个元素的简单切换 | 页面中只有少量元素需要切换，不需要复用的场景 |
| 封装toggle方法 | 代码复用性高，减少冗余逻辑，扩展方便 | 页面中有多个元素需要切换，或者需要统一维护切换逻辑的场景 |
注意事项
- 获取非行内样式时，需要使用
window.getComputedStyle方法，直接读取element.style.display只能拿到行内样式的值，无法获取外部CSS或内部样式表中定义的display值。 - 如果div本身默认的display值不是
block，比如是flex、inline-block等，切换时需要将对应的显示值写对，避免改变元素原本的布局特性。 - 如果需要隐藏时保留元素占据的布局空间，可以将display切换改为visibility属性切换，visibility设置为
hidden时元素隐藏但保留布局空间，设置为visible时显示。
实际开发中可以根据具体需求选择合适的实现方式，核心都是通过JavaScript动态修改元素的CSS属性来控制显示状态，掌握这两种方法基本可以覆盖大部分div显示隐藏切换的场景。
HTMLdivdisplaytoggleJavaScript修改时间：2026-06-18 22:12:23