在网页前端开发中，根据用户的点击、滑动等操作切换div元素的显示和隐藏是非常常见的需求，比如实现折叠面板、弹窗控制、选项卡切换等功能都需要用到这个操作。不同的实现方式有不同的适用场景，开发者需要了解其特性才能做出合适的选择。
使用CSS的display属性实现切换
display属性是控制元素显示状态最常用的CSS属性，当设置display:none时，元素会被完全隐藏，且不占据页面的任何空间，相当于元素从文档流中移除。设置display:block或者其他对应布局的display值时，元素会重新显示。
我们可以通过JavaScript动态修改div的display属性来实现切换，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display属性切换div</title>
<style>
.target-div {
width: 200px;
height: 100px;
background-color: #f0f0f0;
margin-top: 10px;
}
</style>
</head>
<body>
<button onclick="toggleDiv()">切换div显示/隐藏</button>
<div id="myDiv" class="target-div">这是需要切换的div内容</div>
<script>
function toggleDiv() {
const div = document.getElementById('myDiv');
// 判断当前display状态，切换为相反状态
if (div.style.display === 'none') {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
</script>
</body>
</html>
使用CSS的visibility属性实现切换
visibility属性也可以控制元素的显示和隐藏，设置visibility:hidden时元素会隐藏，但和display不同的是，隐藏后的元素仍然会占据原来的页面空间，只是内容不可见。设置visibility:visible时元素会重新显示。
对应的实现示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>visibility属性切换div</title>
<style>
.target-div {
width: 200px;
height: 100px;
background-color: #e8f4ff;
margin-top: 10px;
}
</style>
</head>
<body>
<button onclick="toggleDivByVisibility()">切换div显示/隐藏</button>
<div id="myDiv2" class="target-div">这是使用visibility切换的div</div>
<p>下方内容不会被div隐藏影响位置</p>
<script>
function toggleDivByVisibility() {
const div = document.getElementById('myDiv2');
// 切换visibility状态
if (div.style.visibility === 'hidden') {
div.style.visibility = 'visible';
} else {
div.style.visibility = 'hidden';
}
}
</script>
</body>
</html>
两种方法的特性对比
为了更清晰地了解两种方法的区别，我们可以通过下表对比：
| 对比项 | display属性 | visibility属性 |
|---|---|---|
| 隐藏后是否占据空间 | 否，元素脱离文档流 | 是，保留原有空间 |
| 子元素是否可单独显示 | 不可，父元素隐藏子元素必然隐藏 | 可以，子元素设置visibility:visible可单独显示 |
| 对页面布局的影响 | 会影响后续元素的位置 | 不会影响后续元素的位置 |
使用class类名切换的实现方式
除了直接修改style属性，我们还可以通过切换CSS类名的方式来实现div的显示隐藏，这种方式更符合样式和结构分离的原则，便于维护。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类名切换div</title>
<style>
.target-div {
width: 200px;
height: 100px;
background-color: #f9f0ff;
margin-top: 10px;
transition: opacity 0.3s; /* 添加过渡效果 */
}
.hide {
display: none;
}
/* 如果使用visibility的话，对应的hide类为 */
/* .hide { visibility: hidden; } */
</style>
</head>
<body>
<button onclick="toggleDivByClass()">切换div显示/隐藏</button>
<div id="myDiv3" class="target-div">通过切换类名实现切换的div</div>
<script>
function toggleDivByClass() {
const div = document.getElementById('myDiv3');
// 切换hide类名的存在
div.classList.toggle('hide');
}
</script>
</body>
</html>
这种方式的优势在于如果需要修改隐藏的逻辑，只需要修改CSS中的hide类定义即可，不需要改动JavaScript代码，适合复杂项目的维护。
注意事项
- 如果div初始没有设置display或者visibility的style属性，第一次获取div.style.display会得到空字符串，所以可以在初始化时给div设置默认的display值，或者在判断时增加空值的处理。
- 使用display:none隐藏的元素，其中的表单元素的值不会被提交，而visibility:hidden隐藏的元素中的表单值仍然会被提交。
- 如果需要切换时有动画效果，可以结合CSS的transition属性，或者使用opacity属性配合visibility实现淡入淡出效果，避免直接使用display导致动画失效。
HTMLdiv切换display属性visibility属性JavaScript修改时间：2026-07-06 03:42:29