display: none 是最可靠隐藏方式，真正移除渲染与交互；visibility: hidden 仅透明但占位且可交互；hidden 属性语义清晰但可被 CSS 覆盖；opacity: 0 + pointer-events: none 仅适用于动画定位场景。
用 display: none 是最可靠、最常用的方式，它真正移除元素的渲染和交互能力，不是“看不见”，而是“不存在于布局中”。
为什么不用 visibility: hidden
它只是让元素变透明，但依然占位、仍可响应鼠标事件（比如 click、focus），容易导致点击穿透或父容器高度异常。常见错误现象包括：
- 页面留白却找不到原因，检查发现是
visibility: hidden的 div 还在撑高父容器 - 用户点中空白区域，实际触发了被 “隐藏” 的按钮
- 屏幕阅读器仍会读出内容，不符合无障碍预期
除非你明确需要保留占位（例如做淡入动画过渡），否则别选它。
hidden 属性比 display: none 更轻量吗
是的，hidden 是 HTML5 原生布尔属性，语义清晰，默认行为等价于 display: none，且不依赖 CSS 解析。但它有两点必须注意：
- JS 控制时直接写
el.hidden = true或el.hidden = false，比操作style.display更安全 - 它可被 CSS 覆盖：如果全局样式写了
[hidden] { display: block; }，那就失效了——线上项目上线前务必检查是否有这类冲突 - 和
aria-hidden="true"完全不同：hidden是真隐藏（DOM 不渲染），aria-hidden只影响辅助技术，元素仍可见、可点
用 opacity: 0 + pointer-events: none 的真实用途
这不是常规隐藏方案，而是为动画或 DOM 定位服务的。比如 tooltip 锚点需保持位置、拖拽过程中临时“视觉隐藏”但不能脱离文档流。关键点：
- 只设
opacity: 0不够——元素仍可点击，必须加pointer-events: none - 它不释放布局空间，大量使用会拖慢渲染性能（尤其在滚动容器里）
- 对屏幕阅读器仍可见，如需兼顾无障碍，得额外加
aria-hidden="true" - 千万别用它替代
display: none做权限控制类隐藏——DOM 仍在，敏感内容可能被爬取或调试看到
JS 动态控制时最容易踩的坑
直接写 element.style.display = 'none' 看似简单，但恢复显示时若硬写 'block'，很可能破坏原本的 inline-block 或 flex 行为。稳妥做法是：
- 用 class 切换代替内联样式：
element.classList.toggle('is-hidden')，CSS 中定义.is-hidden { display: none; } - 如果必须用 JS 控制，先缓存原始值：
const originDisplay = getComputedStyle(element).display;，恢复时设回该值 - 避免在循环中反复读写
style.display，会强制同步重排；批量操作建议用documentFragment或统一 class - 别拿
offsetHeight === 0当判断依据——display: none后它恒为 0，无法区分是否本就不可见
真正难的不是“怎么藏”，而是“藏完要不要留痕、留多少、谁还能感知到它”。选错方式，轻则布局错乱，重则暴露逻辑或数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
