应根据需求选择 display: none 或 visibility: hidden：前者彻底移除布局、触发重排，适合权限控制但需后端配合；后者保留布局与交互能力、仅重绘，适合动画或临时隐藏，但需注意继承性与无障碍问题。
display: none 后怎么让按钮重新显示
直接改 style.display 为 "block" 或对应原始值（如 "inline"）最常用，但容易出错——比如按钮原本是 inline 元素，硬设 display: block 会破坏行内布局。
更稳妥的做法是移除内联样式本身：element.style.removeProperty("display")，让它回归 CSS 文件里定义的 display 值。前提是外部样式没写死 display: none，否则还得同步清理那条规则。
- 用
element.classList.toggle("hidden")切换预设类，比手动操作 style 更易维护 - 如果按钮被多层样式覆盖（比如
.modal.is-hidden button），仅改内联样式无效，得检查并覆盖高优先级选择器 -
element.removeAttribute("style")可清空所有内联样式，但会连带丢失 color、font-size 等设置，慎用
visibility: hidden 后恢复显示的坑点
visibility: hidden 恢复只需设 style.visibility = "visible"，看似简单，但实际常被忽略两点：一是父级若也设了 visibility: hidden，子元素设 visible 仍不可见；二是它不阻止 pointer-events，默认仍可响应点击——除非你额外加 pointer-events: none。
另外，visibility 是继承属性，所以即使只给外层容器设了 hidden，里面所有按钮都会消失；而 display: none 不继承，只作用于自身节点。
- 用
getComputedStyle(element).visibility查当前计算值，别只信 class 名或 JS 变量 - Safari 旧版本对
visibility+pointer-events组合支持不稳定，测试时要真机验证 - 屏幕阅读器可能读取
visibility: hidden内容，敏感信息别依赖它做“隐藏”
为什么不能只靠前端隐藏按钮
前端隐藏只是视觉/交互层面的遮盖，DOM 节点始终存在。用户打开开发者工具，删掉 style="display: none" 或直接执行 $$('[hidden]').forEach(el => el.hidden = false) 就能全调出来。
真正需要权限控制的按钮（比如管理员操作），必须配合后端鉴权：按钮渲染前就判断权限，服务端不返回该 DOM；或者点击时校验 token，而非仅靠 JS 控制显隐。
-
hidden属性语义正确，但和display: none一样不防爬虫、不防调试 - 用
opacity: 0+pointer-events: none模拟隐藏，键盘 tab 仍能聚焦，无障碍体验差 - 动画过渡只能用
visibility或opacity，display不支持 transition
display 与 visibility 的性能差异在哪
display: none 触发重排（reflow），浏览器要重新计算整个布局；visibility: hidden 只触发重绘（repaint），开销小得多。频繁切换大量按钮时，后者更稳。
但 display: none 的代价是：按钮内的 <input> 失去焦点、不参与表单提交、getBoundingClientRect() 返回全 0；而 visibility: hidden 下这些行为都保留，只是看不见。
- 大量元素用
display: none切换，可能卡顿，尤其低端设备 -
visibility: hidden元素仍占内存、仍可被 JS 访问，别指望它“释放资源” - 服务端渲染页面首次加载时，
display: none的按钮会闪一下再消失，visibility不会
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
