js 实现div隐藏与显示

使用 style.display 属性

通过修改元素的 style.display 属性可以实现隐藏与显示。隐藏时设为 "none"，显示时可设为 "block"、"inline" 或其他原始显示值。

// 隐藏元素
document.getElementById("myDiv").style.display = "none";

// 显示元素（假设原始为块级元素）
document.getElementById("myDiv").style.display = "block";

使用 classList 切换 CSS 类

定义 CSS 类控制显示状态，通过 JavaScript 动态切换类名。

.hidden {
  display: none;
}

const div = document.getElementById("myDiv");
// 隐藏
div.classList.add("hidden");
// 显示
div.classList.remove("hidden");
// 切换显示状态
div.classList.toggle("hidden");

使用 visibility 属性

与 display 不同，visibility: hidden 会保留元素占位空间。

// 隐藏（保留空间）
document.getElementById("myDiv").style.visibility = "hidden";
// 显示
document.getElementById("myDiv").style.visibility = "visible";

使用 opacity 实现淡入淡出

结合 CSS 过渡效果可实现动画效果。

.fade {
  opacity: 0;
  transition: opacity 0.5s;
}

const div = document.getElementById("myDiv");
// 淡出
div.classList.add("fade");
// 淡入
div.classList.remove("fade");

使用 jQuery 方法

如果项目使用 jQuery，可简化操作：

// 隐藏
$("#myDiv").hide();
// 显示
$("#myDiv").show();
// 切换
$("#myDiv").toggle();
// 淡入淡出
$("#myDiv").fadeOut();
$("#myDiv").fadeIn();