最直接且稳妥的按钮点击隐藏方法是设置 style.display = 'none'，它彻底移除元素、不占空间、不响应事件；推荐用 classList.add('hidden') 维护性更好；框架中应通过状态控制渲染而非直接操作 DOM。
用 style.display = 'none' 最直接
按钮点击后隐藏自己，本质是修改 DOM 元素的 CSS display 属性。最稳妥的做法是直接设为 'none'，它会彻底从文档流中移除元素，不占空间，也不响应后续事件。
常见错误是误用 visibility: hidden 或 opacity: 0：前者仍占布局空间，后者虽然透明但还能被点击（除非加 pointer-events: none）。
实操建议：
- 绑定
onclick事件时，用this.style.display = 'none'——this指向当前按钮，无需查 ID 或 class - 如果按钮是动态生成的，推荐用事件委托 +
event.target判断是否为按钮再执行隐藏 - 避免写成
this.style.display = ''（清空样式），这不会恢复到初始值，可能继承父级或浏览器默认值
用 class 切换更利于维护
当隐藏逻辑可能扩展（比如要加淡出动画、同步隐藏兄弟元素、或后续需要显示回来），硬编码 style 就容易失控。此时应把隐藏规则抽成 CSS class，用 JS 控制增删。
立即学习“前端免费学习笔记（深入）”；
例如定义：
.hidden { display: none; }
JS 中调用：
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
this.classList.add('hidden')—— 推荐，语义清晰，不影响其他 class - 避免
this.className = 'hidden'—— 会覆盖所有已有 class - 若需切换（点一次隐藏，再点显示），用
this.classList.toggle('hidden')
注意内联样式与 CSS 优先级冲突
如果按钮本身带 style="display: block"，或所在项目用了 CSS-in-JS、框架组件（如 React 的 style prop），直接改 this.style.display 是有效的，因为内联样式优先级最高。
但如果只靠 class 控制，而 CSS 文件里写了：
button { display: block !important; }
那 classList.add('hidden') 就失效了 —— !important 会压制 class 中的 display: none。
解决办法：
- 去掉
!important（优先推荐） - 改用更高权重的选择器，比如
button.hidden或#myBtn.hidden - 退一步，还是回到
this.style.display = 'none'，它天然胜过所有外部 CSS
React/Vue 等框架里别直接操作 DOM
在 React 中写 document.getElementById('btn').style.display = 'none' 不仅违背数据驱动原则，还会让组件状态和 UI 脱节，下次 re-render 可能又把它刷回来。
正确做法是控制渲染逻辑：
- React：用
useState管理布尔值，条件渲染{showButton && <button>...</button>} - Vue：用
v-if="showButton"或v-show="showButton"（v-show实际走display: none，适合频繁切换） - 关键区别：
v-if是销毁/重建节点，v-show是切样式 —— 和原生display行为一致
原生 JS 场景下，display: none 是够用且可靠的；但在现代框架里，隐藏动作必须收敛到状态层，否则很快会遇到更新不一致、事件监听丢失等问题。
