最稳妥是 display: none，彻底移除按钮且兼容性好；hidden 属性语义化更强并支持辅助技术；visibility: hidden 保留占位但需防事件；opacity: 0 + pointer-events: none 适合过渡动画但需 aria-hidden 兼顾可访问性。
直接用 display: none 最稳妥，但得看你要不要保留布局空间、要不要支持辅助技术、要不要过渡动画——不同场景得选不同方法。
用 display: none 彻底移除按钮
这是最常用也最干净的方式：按钮从渲染树里消失，不占空间、不响应事件、不影响布局流。
- 写法简单：
button { display: none; }或 JS 中btn.style.display = "none" - 注意：设为
"none"后，getComputedStyle(btn).display会返回"none"，但恢复时别硬写"block"——按钮默认是"inline-block"，写空字符串""更安全 - 兼容性极好，所有现代浏览器都支持，包括 IE8+
- 缺点：无法做淡出动画（
display不是可过渡属性）
用 hidden 属性语义化隐藏
hidden 是 HTML5 原生布尔属性，浏览器自动应用 display: none，同时向辅助技术（如读屏器）明确传达“此元素不应被感知”。
- HTML 写法：
<button hidden>提交</button> - JS 控制：
btn.hidden = true/btn.hidden = false（比操作style.display更语义清晰） - 注意：它和
display: none效果一致，但优先级更高——即使你写了button[hidden] { display: block !important; }，浏览器仍会忽略并强制隐藏 - 不支持 CSS 过渡，也不能用
visibility或opacity覆盖
用 visibility: hidden 保留占位
按钮看不见，但还在文档流里占着原来的位置，适合需要维持布局稳定、又不想让它被点击的临时状态。
立即学习“前端免费学习笔记（深入）”；
- JS 设置：
btn.style.visibility = "hidden"；恢复时用"visible" - 关键区别：它仍接收鼠标事件（比如
click），除非你额外加pointer-events: none - 可过渡：
transition: visibility 0.2s, opacity 0.2s配合opacity: 0能做出平滑淡出效果 - 慎用于表单控件——某些屏幕阅读器可能仍把它当作可交互元素播报
用 opacity: 0 + pointer-events: none 实现透明禁用
视觉上消失，布局不变，且彻底禁用交互，适合做过渡动画或临时屏蔽。
- 必须两者配合：
opacity: 0只让按钮变透明，pointer-events: none才阻止点击 - 推荐写成 class：
.visually-hidden { opacity: 0; pointer-events: none; transition: opacity 0.3s; } - 注意：它不通知辅助技术——屏幕阅读器仍会读出该按钮，所以不能替代
hidden或aria-hidden="true" - 如果要兼顾可访问性，建议叠加
aria-hidden="true"（但仅当它确实不该被读取时）
真正容易被忽略的点不是“怎么藏”，而是“藏完之后是否还该被键盘聚焦、是否该被读屏器读到、恢复时 display 值能不能回退准确”——这些细节往往在测试阶段才暴露出来。
