js实现div隐藏显示

使用 style.display 属性

通过修改元素的 style.display 属性可以实现隐藏和显示。隐藏时设为 "none"，显示时设为 "block" 或其他合适的值（如 "inline"、"flex"）。

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

// 显示 div
document.getElementById("myDiv").style.display = "block";

使用 style.visibility 属性

style.visibility 与 display 的区别在于，隐藏时元素仍占据空间。隐藏时设为 "hidden"，显示时设为 "visible"。

// 隐藏 div
document.getElementById("myDiv").style.visibility = "hidden";

// 显示 div
document.getElementById("myDiv").style.visibility = "visible";

使用 classList 切换 CSS 类

通过添加或移除 CSS 类控制隐藏/显示，适合需要复用样式的场景。CSS 中定义隐藏类：

.hidden {
  display: none;
}

JavaScript 代码：

// 隐藏 div
document.getElementById("myDiv").classList.add("hidden");

// 显示 div
document.getElementById("myDiv").classList.remove("hidden");

// 切换显示状态
document.getElementById("myDiv").classList.toggle("hidden");

使用 jQuery 的 hide() 和 show()

如果项目中使用 jQuery，可以直接调用其方法：

// 隐藏 div
$("#myDiv").hide();

// 显示 div
$("#myDiv").show();

// 切换显示状态
$("#myDiv").toggle();

动态控制多元素显示

通过循环或事件委托控制多个元素的显示/隐藏：

// 隐藏所有 class 为 item 的元素
document.querySelectorAll(".item").forEach(el => {
  el.style.display = "none";
});

动画效果显示/隐藏

结合 CSS 过渡或动画实现渐变效果：

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

JavaScript 代码：

const div = document.getElementById("myDiv");
div.classList.add("fade");

// 显示
div.classList.add("show");

// 隐藏
div.classList.remove("show");