js 实现div隐藏与显示

使用 style.display 属性

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

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

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

使用 style.visibility 属性

style.visibility 控制元素是否可见但保留布局空间。设置为 "hidden" 隐藏元素，"visible" 显示元素。

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

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

使用 classList 切换 CSS 类

通过添加或移除 CSS 类实现隐藏与显示，适合需要复用样式的场景。

.hidden {
  display: none;
}

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

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

使用 jQuery 的 hide() 和 show()

如果项目中已引入 jQuery，可以使用其简化方法。

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

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

动态切换显示状态

通过条件判断动态切换显示状态。

const div = document.getElementById("myDiv");
div.style.display = div.style.display === "none" ? "block" : "none";

注意事项

• display: none 会完全移除元素布局，而 visibility: hidden 会保留元素空间。
• 频繁操作 DOM 可能影响性能，建议结合 CSS 类或批量操作优化。