display: none 使按钮彻底消失且不占空间、不可点击，dom仍在但渲染跳过；visibility: hidden 仅视觉隐藏仍占位、可能被聚焦；opacity: 0 需配合 pointer-events: none 防点击；均需兼顾可访问性与表单行为。
display: none 会让按钮彻底“消失”
按钮设成 display: none 后，它不再参与布局、不占空间、无法点击、子元素也一并不可见。DOM 节点还在，但渲染引擎直接跳过它。
- 适合场景：切换表单字段、选项卡内容、模态框关闭时移除交互入口
- JavaScript 控制写法：
btn.style.display = "none"或btn.style.display = ""恢复（注意不是"block"，避免破坏原有 display 类型） - 常见错误：用
display: none隐藏<input type="submit">后提交表单，该按钮的 value 不会发送；若需保留数据但隐藏 UI，得换思路（比如用aria-hidden="true"+opacity: 0） - 性能提示：频繁切换大量按钮的
display会触发重排（reflow），比visibility开销大
visibility: hidden 只是“看不见”，按钮还在原位
visibility: hidden 下按钮仍占据空间、能被 getBoundingClientRect() 获取尺寸、屏幕阅读器可能读到它——但它默认不响应鼠标事件。
- 适合场景：做淡入动画前的预备状态、保持按钮位置不动但临时屏蔽（比如加载中禁用）、配合
pointer-events: none实现“透传点击” - 子元素可覆盖：如果按钮里嵌了图标或文字，给子元素加
visibility: visible，它会显示出来（display: none下完全无效） - 注意 Safari 旧版本对
visibility+pointer-events组合支持不稳定，测试时别漏掉 - 不能靠它防用户操作：按钮虽不可见，但若没禁用
focus()，键盘 Tab 仍可能聚焦到它
button 隐藏时还要考虑可访问性和表单行为
单纯视觉隐藏不等于对所有用户都“隐藏”。尤其按钮常带功能语义，处理不当会影响键盘导航和辅助技术。
- 用
aria-hidden="true"配合display: none更稳妥，明确告诉屏幕阅读器忽略它 - 如果按钮是表单提交控件，隐藏时最好同步设
disabled属性，防止键盘用户误触 Enter 提交 -
opacity: 0虽然能做过渡动画，但按钮仍可点击——必须加pointer-events: none才安全 - 服务端渲染（SSR）页面中，
display: none不影响 HTML 输出，首屏可能闪一下再消失，需要 JS 尽快执行
别用 display: none 做“销毁”，也别靠 visibility: hidden 挡交互
两者都不删除 DOM 节点，也不清除绑定的事件监听器。真要释放资源，得手动 removeEventListener 或用 el.remove()；而想阻止交互，disabled 或 pointer-events: none 比单纯视觉隐藏更直接。
最容易被忽略的是：隐藏后是否还该接收焦点、是否影响表单序列化、是否要通知辅助技术——这些决定了你该选哪个属性，而不是只看“看起来有没有”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
