JavaScript控制元素显隐有三种方式：display切换使元素彻底脱离文档流，visibility仅隐藏但保留占位，class管理最灵活且支持动画；均需配合事件触发。
用 JavaScript 控制元素显隐，核心是操作 DOM 元素的 style.display、style.visibility 或 class，配合事件触发（如点击按钮）。关键不在“能不能”，而在“选哪种方式更合适”。
用 display 切换最常用
设置 display: none 会让元素彻底从文档流中移除，不占空间；设为 block（或原标签默认值，如 inline、flex）即可恢复显示。适合需要真正“隐藏+释放布局空间”的场景。
- 先获取元素：
const box = document.getElementById('myBox'); - 切换逻辑可写成：
box.style.display = box.style.display === 'none' ? 'block' : 'none'; - 注意：如果元素原本不是
display: block（比如是inline或通过 CSS 设为flex），硬设'block'可能破坏样式。更稳妥的做法是提前存好原始值，或用getComputedStyle读取： const computed = getComputedStyle(box);<br>box.style.display = computed.display === 'none' ? 'initial' : 'none';
用 visibility 更轻量
visibility: hidden 仅让元素不可见，但仍在文档流中占位，不影响周围布局。切换开销小，适合频繁切换且不想触发重排（reflow）的场景，比如悬停提示、临时遮罩。
- 切换写法简单：
box.style.visibility = box.style.visibility === 'hidden' ? 'visible' : 'hidden'; - 子元素默认继承该属性，若需子元素仍可见，可在子元素上显式设
visibility: visible
用 class 管理最灵活
把显隐样式写在 CSS 类里（如 .hidden { display: none; }），JavaScript 只负责增删 class。好处是样式与逻辑分离，支持过渡动画，也便于统一维护。
立即学习“Java免费学习笔记（深入）”；
- CSS 中定义：
.hidden { display: none; }<br>.fade-out { opacity: 0; transition: opacity 0.3s; } - JS 中操作：
box.classList.toggle('hidden');
或带动画：box.classList.toggle('fade-out'); - 想兼容老浏览器（IE9–）可用
box.className拼接字符串，但推荐用classList（现代浏览器都支持）
绑定事件实现交互
显隐本身是静态操作，加上事件才能响应用户行为。常见的是点击按钮/链接触发。
- HTML 示例：
<button id="toggleBtn">切换显示</button><br><div id="content">这是要控制的内容</div>
- JS 绑定：
document.getElementById('toggleBtn').addEventListener('click', () => {<br> const el = document.getElementById('content');<br> el.classList.toggle('hidden');<br>}); - 也可用内联
onclick，但不推荐——不利于解耦和复用
