display: none 是最彻底的隐藏方式，它让元素从渲染树中完全移除，不占空间、不可点击、不触发加载（对尤其关键）、屏幕阅读器默认跳过。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

display: none 是最彻底的隐藏方式 它让元素从渲染树中完全移除：不占空间、不可点击、不触发加载（对 <img> 尤其关键）、屏幕阅读器默认跳过。适用于你确定该元素当前不该存在、也不参与布局的场景。

• 直接写内联样式：<div style="display:none">…</div>，但容易被后续 CSS 覆盖
• 推荐用 class 控制：<div class="js-hidden">…</div>，配 CSS .js-hidden { display: none; }
• JS 动态控制时，别只写 el.style.display = '' —— 这不会恢复原始值；应缓存或读取 getComputedStyle(el).display，或统一设为 'block'/'inline' 等具体值
• 对 <img> 标签，display: none 在 DOM 渲染前设置才能阻止 HTTP 请求；若已开始加载，需额外清空 src

hidden 属性比 CSS 更轻量且语义明确 hidden 是 HTML5 原生布尔属性，浏览器原生行为等价于 display: none，但无需依赖任何 CSS 规则，也不会被类名或内联样式意外覆盖。

• 静态使用：<div hidden>临时下线内容</div>
• JS 控制：el.hidden = true 或 el.hidden = false
• 注意：全局 CSS 若写了 [hidden] { display: block; } 会直接失效，线上项目务必检查是否有这类覆盖规则
• 不支持 IE9 及更早版本，但现代项目基本无需兼容

opacity: 0 + pointer-events: none 适合动画或定位依赖场景 单纯 opacity: 0 只是“看不见”，元素仍在渲染树里、仍占位、仍响应事件——这是最常见的误用点。

• 必须搭配 pointer-events: none 才能真正禁用交互，否则用户可能点到“隐形按钮”却无反馈
• 适合需要淡入/淡出动画、或依赖元素 DOM 位置做计算（如 tooltip 锚点、拖拽起点）的场景
• 对屏幕阅读器仍可见，如需无障碍隐藏，得额外加 aria-hidden="true"
• 大量节点用此法隐藏会影响性能，不如 display: none 干净

别用 visibility: hidden 替代 display: none visibility: hidden 不会释放布局空间，子元素也无法通过设 visibility: visible 强行显示出来——这点常被忽略。

• 它仍会触发 offsetHeight 计算、仍可被 tab 键聚焦（除非显式 tabindex="-1"）
• 父元素设了 visibility: hidden 后，整个子树都不可见，且无法局部“钻出”
• 它和 display: none 的底层机制完全不同：前者只是关掉绘制，后者是剔除渲染节点
• 真正需要“占位但暂不可见”时才用它，比如配合 opacity 做过渡准备

真正难处理的是那些必须留在 DOM 里、又要动态控制可见性、还要求不触发图片加载的元素——这时候得组合操作：display: none 和提前清空 src 缺一不可，顺序也不能错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！