用style.display控制按钮显隐最直接，隐藏时设display: none，显示时推荐清空内联样式（display: ''）以恢复默认inline-block；visibility和opacity仅隐藏视觉，不阻止交互，需搭配pointer-events: none和tabindex="-1"才安全；推荐用css类切换而非硬编码style，兼顾可维护性与无障碍；隐藏submit按钮不能阻止回车提交，须同时设disabled=true。
用 style.display 控制按钮显隐最直接
绝大多数场景下，改 display 是最快、最稳妥的方式。它真正移除/恢复元素在文档流中的占位，不会留白，也不会影响其他元素布局。
常见错误是只设 display: none 却忘了还原时该用什么值——不是所有元素默认都是 block，button 默认是 inline-block。硬写 display: block 可能导致宽度异常或换行问题。
- 隐藏：
btn.style.display = 'none'; - 显示（推荐）：
btn.style.display = '';（清空内联样式，回退到 CSS 默认值） - 显示（备选）：
btn.style.display = 'inline-block';（明确指定，但需确认样式上下文）
visibility 和 opacity 不等于“隐藏按钮”
这两个属性常被误用：它们让按钮“看不见”，但依然可点击、仍占据空间、仍参与 tab 键导航——对交互逻辑有实质影响。
比如用 visibility: hidden 隐藏后，用户按 Tab 键仍会聚焦到该按钮；用 opacity: 0 时鼠标悬停、点击事件照常触发，极易引发意料外的表单提交或状态错乱。
- 除非你明确需要保留占位+禁用交互（如做淡入动画过渡），否则别用
visibility -
opacity: 0必须搭配pointer-events: none才安全，且要同步处理键盘焦点（tabindex="-1"） - 纯视觉隐藏 ≠ 功能隐藏，这点在无障碍访问（a11y）和自动化测试里特别关键
用 class 切换比直接操作 style 更可控
硬编码 style.display 容易和 CSS 文件里的规则冲突，尤其当按钮本身有媒体查询、伪类（:hover）、或被框架动态加 class 时，内联样式优先级虽高，但维护成本陡增。
更健壮的做法是定义 CSS 类，用 JS 切换 class 名：
.btn-hidden { display: none; }
.btn-disabled { opacity: 0.5; pointer-events: none; }
然后 JS 里统一用：btn.classList.add('btn-hidden') 或 btn.classList.toggle('btn-hidden')。
- 避免手写重复样式，CSS 复用率高
- 方便调试：浏览器开发者工具里一眼看到当前生效的 class
- 支持 CSS 过渡动画（
display不能过渡，但opacity+visibility可以）
注意表单提交中按钮状态的副作用
如果按钮是 <button type="submit"></button>，隐藏它并不会阻止表单自动提交——只要用户按回车，或者有其他可聚焦元素触发 submit 事件，照样提交。单纯隐藏不等于禁用。
- 真正想阻止提交？得同时设
btn.disabled = true，再配合display: none（disabled 不影响 display） - 用
display: none后，该按钮的value不会随表单提交，但disabled的按钮值也不会提交——两者行为一致 - 如果按钮绑了
onclick，隐藏后事件监听器还在，只是用户点不到；而disabled会彻底忽略鼠标和键盘事件
实际项目里，显示/隐藏往往不是孤立操作，得同步考虑 disabled 状态、表单验证时机、以及是否要重置按钮文案或 loading 状态——这些细节漏掉一个，就容易出现“按钮看不见但还能点”或者“点了没反应却不知道为什么”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
