hidden属性语义是“内容逻辑上不存在”，非视觉隐藏；需CSS兜底规则[hidden]{display:none!important}防闪现，JS应直接操作el.hidden=true/false而非setAttribute，且不支持动画、影响表单提交和可访问性。
hidden 属性不是“让元素看不见”的 CSS 替代品，它声明的是“这个内容当前逻辑上不该存在”——只要属性存在，元素就彻底退出渲染树、可访问性树和表单序列化。
hidden 属性为什么写了却没效果
常见现象是加了 hidden，元素照常显示。根本原因不是浏览器不支持，而是写法或样式干扰：
-
hidden="false"或hidden="0"—— 无效。只要属性存在（哪怕值为空字符串），就触发隐藏；hidden是布尔属性，不解析值 - 内联样式强制覆盖：
<div hidden style="display: block">—— 浏览器仍执行语义逻辑，但你的style优先级更高，结果就是“不隐藏” - 没加 CSS 兜底规则：
[hidden] { display: none !important; }—— SSR 场景下 JS 还没执行时，HTML 已解析渲染，可能闪现内容 - 用了 Vue/React 等框架，把
hidden当普通 prop 处理，没透传到真实 DOM
JS 控制 hidden 的正确姿势
DOM 元素原生支持 hidden 作为布尔属性读写，这是最直接、最可靠的方式：
- 隐藏：
el.hidden = true（自动添加属性） - 显示：
el.hidden = false（自动移除属性，不是设成字符串"false"） - 判断状态：
if (el.hidden)—— 返回true或false，不是字符串 - 别用
el.setAttribute('hidden', '')或el.removeAttribute('hidden')：能工作但冗余，且和初始 HTML 状态判断不一致（比如服务端已渲染hidden，JS 设el.hidden = false后，el.hasAttribute('hidden')仍返回true） - 如果之前用
el.style.display = 'none'隐藏过，得先清内联样式：el.style.display = ''，再设el.hidden = false，否则仍不可见
hidden 和 display: none 的关键行为差异
视觉相似，但底层机制和副作用完全不同：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
hidden影响表单提交：<input name="token" value="abc" hidden>在FormData或form.elements中完全消失；display: none下它依然参与序列化 -
hidden让整个子树退出可访问性树 —— 屏幕阅读器跳过，焦点无法进入；display: none的可访问性行为依赖浏览器实现，不保证一致 -
hidden无法动画：transition: display无效，@keyframes里不能控制；需要过渡效果必须配合opacity或max-height类，再用hidden做最终开关 -
hidden不受父容器布局影响（比如 flex/grid 容器不会“修复”它的隐藏）；display: none可能被某些旧版 Safari 或复杂 CSS 层叠意外绕过
哪些场景绝对不能用 hidden
它只适合「内容当前逻辑无关」的场景，不是视觉控制工具：
- 要做淡入/高度过渡？
hidden不支持任何 CSS 动画或transition，必须手动控制显隐时机 - 需要保留占位空间（比如 tooltip 锚点、折叠面板预留位置）？
hidden会让布局塌掉，该用visibility: hidden或opacity: 0 - 要隐藏但保留表单字段提交能力？必须用
<input type="hidden">，和hidden属性语义完全不同 - 在 Vue/React 条件渲染逻辑里混用
v-if/{condition && }和hidden—— 它们语义冲突，容易导致状态不一致
最容易被忽略的是：CSS 兜底规则 [hidden] { display: none !important; } 必须存在，否则首屏必然闪一下；而 JS 设置 el.hidden = false 永远晚于 HTML 渲染，不能用来“补救”FOVC。
