element.hidden = true/false 是原生语义化隐藏方案，移除可访问性、禁用交互、不占布局空间；应避免与 display: none 混用，推荐直接操作 DOM 属性判断和控制。
直接用 element.hidden = true 或 false 就能快速控制显隐，语义清晰、操作轻量，且浏览器原生优化支持。
hidden 属性的核心特点
它不是 CSS 的快捷写法，而是 HTML 原生布尔属性，作用是“语义化隐藏”：元素从可访问性树中移除、不参与渲染（子节点也不渲染）、交互能力被禁用（比如 click 事件不会触发）。它的视觉效果类似 display: none，但行为更严格。
- hidden=true：元素不可见、不占空间、屏幕阅读器跳过、无法响应事件
- hidden=false 或移除该属性：完全恢复可见性、可访问性与交互能力
- 不要混用
hidden和display: none—— 语义冲突，容易导致状态混乱
怎么用 JavaScript 设置和检测
推荐统一走 DOM 属性操作，避免手动操作 class 或 style：
- 隐藏元素：
el.hidden = true（自动添加hidden属性） - 显示元素：
el.hidden = false（自动移除hidden属性） - 判断是否隐藏：
if (el.hidden) { ... }—— 直接读布尔值，最可靠 - 避免用
el.hasAttribute('hidden')或el.removeAttribute('hidden')，语义不如赋值明确
适合 hidden 的典型场景
它不是万能切换开关，更适合“声明式、静态、无需后续交互”的隐藏需求：
立即学习“Java免费学习笔记（深入）”；
- 服务端预渲染时，根据权限直接加
hidden，比输出空 div + CSS 更语义准确 - 表单中某组字段初始不适用，用
hidden表达“当前无效”，比display: none更符合可访问性规范 - 避免页面闪动：HTML 中带
hidden输出，JS 加载后按需设为false，比先显示再隐藏更稳定
别踩的坑
几个常见误用点要特别注意：
- 给
hidden元素绑定 click 事件？点不了——UA 已将其视为不可交互 - 想用
opacity或transform配合动画？hidden会直接跳过渲染，动画无效 - 在 Vue/React 中混用
v-if或{condition && <div>} 和 <code>hidden？DOM 状态和框架状态可能不一致 - 用
getBoundingClientRect()测尺寸？返回全是 0；offsetWidth/Height也恒为 0
