最直接的方式是通过 id 获取元素并设置 style.display = 'none'；推荐用 classList.toggle('hidden') 解耦样式与逻辑，避免内联样式干扰，支持动画且更易维护。
点击按钮后用 JavaScript 隐藏某个 div
最直接的方式是给目标元素加 id，然后在按钮的 onclick 里调用 document.getElementById().style.display = 'none'。注意别用 visibility: hidden —— 它只是“看不见”，但还占布局空间；display: none 才是真隐藏、不占位。
常见错误：写成 document.getElementById('xxx').hidden = true —— 这确实也能隐藏，但语义上它是控制可访问性（a11y）的布尔属性，且不会触发重排，某些老浏览器兼容性弱于 style.display。
- 确保目标元素有唯一
id，比如<div id="panel">内容</div> - 按钮可以是
<button onclick="hidePanel()">隐藏</button>，函数定义为function hidePanel() { document.getElementById('panel').style.display = 'none'; } - 如果要支持多次切换（显示/隐藏），改用
style.display = style.display === 'none' ? '' : 'none'，空字符串会恢复默认值（如block）
用 classList.toggle() 控制 CSS 类实现隐藏
比直接操作 style 更灵活，尤其当需要配合过渡动画、或统一管理多个样式时。核心是预先定义一个 CSS 类，比如 .hidden { display: none; }，再用 JS 切换它。
优势在于解耦：样式逻辑在 CSS 文件里，JS 只管状态切换；也方便后续加 transition 动画（display 本身不能过渡，但可以用 opacity + height 等组合模拟）。
立即学习“前端免费学习笔记（深入）”；
- CSS 中写：
.hidden { display: none; }（或更精细的.collapsed { max-height: 0; opacity: 0; overflow: hidden; }） - JS 里写：
document.getElementById('target').classList.toggle('hidden') - 注意：不要写成
classList.add('hidden')后又忘记remove，否则无法再次显示；toggle是安全选择
多个按钮控制同一个元素，避免重复绑定
如果页面里有好几个按钮都要隐藏同一个元素（比如页头、侧边栏、弹窗），别每个都写 onclick="..."，容易维护错。推荐统一用事件委托或一次性绑定。
典型坑：用 querySelectorAll('.hide-btn') 拿到 NodeList 后，直接 .forEach 绑定，但忘了检查是否拿到元素——如果 DOM 还没加载完就执行 JS，querySelectorAll 返回空数组，绑定无声失败。
- 把 JS 放在
</body>前，或包装进DOMContentLoaded回调 - 绑定示例：
document.querySelectorAll('.hide-btn').forEach(btn => { btn.addEventListener('click', () => { document.getElementById('target').style.display = 'none'; }); }); - 也可以给所有按钮加相同
data-target="target"属性，让 JS 读取并复用，减少硬编码 ID
隐藏后想恢复，但 display 值丢失了怎么办
直接设 display = 'none' 再设回空字符串，能恢复默认值（如 div 是 block，span 是 inline），但前提是原来没通过 CSS 设置过其他 display 值。如果样式表里写了 #mydiv { display: flex; }，那空字符串就恢复不了 flex。
这时候要么提前缓存原始值：const el = document.getElementById('x'); const origin = el.style.display; el.style.display = 'none'; ... el.style.display = origin;，要么改用 classList 方案，完全绕开内联样式的干扰。
- 用
getComputedStyle(el).display能读到最终计算值，但它返回的是实际生效值（比如flex），不是原始 CSS 声明，也不适合直接赋回去 - 如果元素原本靠 CSS 类控制显示，最稳的方式还是
classList.remove('show')/classList.add('show')，而不是动style.display - 移动端要注意：iOS Safari 对
display: none元素里的video或iframe有时不释放资源，必要时得手动pause()或src = ''
