JavaScript中DOM元素显隐切换推荐用style.display，设为none彻底移除元素，恢复时需还原原始值；visibility:hidden保留占位；classList切换CSS类更易维护；opacity:0仅视觉透明且仍交互。
JavaScript 中实现 DOM 元素的隐藏与显示切换，核心是操作元素的 style.display 属性，也可以用 style.visibility 或 classList 配合 CSS 类控制，不同方式行为不同，需按需选择。
用 display 控制显隐（推荐）
display: none 会让元素彻底从文档流中移除，不占空间；设为 block（或原生标签对应的值如 inline、flex 等）即可恢复显示。关键是：要还原成“合适的显示值”，不能一律写 block。
- 获取元素当前的默认 display 值较麻烦，常用做法是提前存好或用
window.getComputedStyle获取原始值 - 更稳妥的方式是用自定义 data 属性记录原始 display 值：
element.dataset.originalDisplay = window.getComputedStyle(element).display - 切换逻辑示例：
<button onclick="toggleDisplay(document.getElementById('box'))">切换</button>
<div id="box">内容</div>
function toggleDisplay(el) {<br> if (el.style.display === 'none') {<br> el.style.display = el.dataset.originalDisplay || 'block';<br> } else {<br> el.dataset.originalDisplay = el.style.display;<br> el.style.display = 'none';<br> }<br>}
用 visibility 控制（保留占位）
visibility: hidden 会隐藏元素但保留其在页面中的空间位置，适合需要维持布局稳定的场景（比如动画过渡、表单校验提示）。
- 设置
el.style.visibility = 'hidden'即隐藏，设为'visible'即显示 - 不会影响文档流，父容器高度、相邻元素位置都不变
- 注意：子元素若设置了
visibility: visible，仍会显示（继承特性可被子级覆盖）
用 classList 切换 CSS 类（语义清晰、易维护）
把样式交给 CSS，JS 只负责增删类名，解耦逻辑与样式，便于复用和主题切换。
立即学习“Java免费学习笔记（深入）”；
- CSS 中定义：
.hidden { display: none; }或.visually-hidden { visibility: hidden; } - JS 中切换：
el.classList.toggle('hidden')（一键切换），或el.classList.add('hidden')/el.classList.remove('hidden') - 支持多个类同时操作：
el.classList.toggle('hidden', condition)，第二个参数控制是否添加
补充：opacity 实现“视觉隐藏”
opacity: 0 让元素透明，但依然响应事件、占据空间。它不是真正隐藏，仅用于淡入淡出等过渡效果。
- 若需隐藏且禁用交互，需额外加
pointer-events: none - 常配合 CSS transition 实现平滑显示/隐藏动画
- 注意：opacity 不影响文档流，也不影响可访问性（屏幕阅读器仍会读取）
