js 实现div隐藏与显示

方法一：使用style.display属性

通过修改元素的style.display属性控制显示与隐藏。设置为"none"隐藏元素，设置为"block"或空字符串""恢复显示。

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

// 显示元素
document.getElementById("myDiv").style.display = "block"; // 或 "" 恢复默认显示方式

方法二：使用style.visibility属性

visibility属性隐藏元素时保留布局空间（隐藏后仍占位），与display的行为不同。

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

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

方法三：使用classList切换CSS类

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

/* CSS定义 */
.hidden {
  display: none;
}

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

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

方法四：使用jQuery库

若项目已引入jQuery，可用其简化操作。

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

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

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

注意事项

• display: none会完全移除元素布局，而visibility: hidden保留占位空间。
• 频繁操作DOM可能影响性能，建议批量修改或使用文档片段优化。
• 动态生成的元素需确保DOM加载完成后操作（如监听DOMContentLoaded事件）。