最直接的方式是通过 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 放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
