hidden 属性是 DOM 层级的逻辑剔除而非视觉隐藏，它使元素不渲染、不参与可访问性树和表单提交，且不支持动画或占位，需配合 CSS 兜底防 FOVC。
hidden 属性不是“让元素看不见”的 CSS 替代品，而是向浏览器声明“这个内容当前逻辑上不该存在”——它会彻底移除渲染、跳过可访问性树、且不参与表单提交。
hidden 属性到底隐藏了什么
它不只是视觉隐藏：hidden 触发的是 DOM 层级的剔除，不是样式层的遮盖。一旦存在，元素：
- 不会出现在渲染树中 →
offsetHeight和getBoundingClientRect()恒为0 - 完全退出可访问性树 → 屏幕阅读器跳过，键盘 Tab 无法聚焦
- 从表单序列化中消失 →
<input type="text" name="token" hidden>在form.submit()或new FormData(form)中根本不会出现 - 所有后代节点（包括
::before/::after）一并不可见、不可交互
为什么写 hidden="false" 还是隐藏
hidden 是布尔属性，只认“存在与否”，不解析值。浏览器看到任何带 hidden 的标签，就立刻执行隐藏逻辑。
-
<div hidden>✅ 标准写法 -
<div hidden="">✅ 空字符串等价于存在 -
<div hidden="false">❌ 依然隐藏，值被忽略 -
<input type="hidden" hidden>⚠️ 冗余且易混淆：type="hidden"是表单字段类型，和hidden属性语义完全不同
JS 控制 hidden 的正确姿势
别用 setAttribute 或 removeAttribute，DOM 元素原生支持 hidden 作为布尔属性读写：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 隐藏：
el.hidden = true（自动添加属性） - 显示：
el.hidden = false（自动移除属性，不是设成字符串"false"） - 判断状态：
if (el.hidden)—— 别用el.hasAttribute('hidden')，SSR 场景下不可靠 - 注意兜底：如果之前用
el.style.display = 'none'隐藏过，得先清内联样式：el.style.display = ''，再设el.hidden = false，否则仍不可见
哪些场景绝对不能用 hidden
它不是万能显隐开关，边界非常明确：
- 要做淡入/高度过渡？
hidden不支持任何 CSS 动画或 transition，必须配合opacity或transform类手动控制，hidden只能作最终开关 - 需要保留占位空间（比如 tooltip 锚点、折叠面板预留位置）？
hidden会让布局塌掉，该用visibility: hidden或opacity: 0 - 想“视觉隐藏但提交表单字段”？
hidden会让字段彻底消失，该用style="position: absolute; left: -9999px"或sr-only类 - 混用
aria-hidden="true"？语义冲突——hidden已让整个子树退出无障碍树，再加 ARIA 属性只会误导屏幕阅读器
最容易被忽略的其实是首屏渲染时的 FOVC（Flash of Visible Content）：服务端直出 <section hidden>，但 CSS 还没加载完，用户会先看到内容再消失。唯一可靠解法是加兜底 CSS：[hidden] { display: none !important; }，放在基础样式最前或 @layer base 里——JS 补救永远晚于首次渲染。
