hidden属性不生效是因为它为布尔属性，仅由存在与否决定，设hidden="false"仍会隐藏；正确用法是element.hidden=true或removeAttribute('hidden')。
hidden 属性为什么有时不生效
因为 hidden 是布尔属性，只靠存在与否起作用，写成 hidden="false" 或 hidden="0" 依然会隐藏元素——浏览器只看它在不在标签里，不解析值。常见错误是动态设置时误用 element.setAttribute('hidden', 'false')，结果元素反而被藏了。
- 正确开关方式：
element.hidden = true（JS 属性）或element.removeAttribute('hidden') -
hidden会触发display: none效果，但优先级低于 CSS 中显式写的display声明 - 和
visibility: hidden不同，hidden元素不占布局空间，也不响应事件
CSS display: none 和 hidden 属性的区别
两者视觉效果一样，但语义和行为不同。hidden 是 HTML5 原生语义属性，表示“该内容当前不该被用户看到”，对可访问性（如屏幕阅读器）有明确影响；而 display: none 纯属样式控制，屏幕阅读器通常也会忽略，但缺乏语义支撑。
- SEO 和辅助技术更倾向尊重
hidden属性，而不是 CSS 隐藏 - 用 JS 切换显示状态时，
element.hidden = false比element.style.display = 'block'更安全——不用猜原来是什么display值 - 如果元素已有
display: flex，硬设display: block可能破坏布局，hidden则无此风险
hidden 在表单提交中会不会被忽略
会。设置了 hidden 的 <input>、<select> 等表单控件，即使有 name 和 value，也不会随表单提交——这是规范行为，不是 bug。
- 需要传值但不想显示？改用
<input type="hidden">，它天生不渲染且参与提交 - 想临时隐藏又保留提交能力？别用
hidden，改用aria-hidden="true"+visually-hiddenCSS 类（仅视觉隐藏） - React/Vue 等框架中，用条件渲染（如
v-if或{show && <Input />}）比加hidden更符合数据驱动逻辑
兼容性与 SSR 场景下的 hidden 使用
hidden 属性 IE10+ 支持，现代浏览器没问题，但服务端渲染（SSR）时要注意：Node.js 环境不识别 hidden 的 DOM 行为，若用 JSDOM 测试，需确认版本 ≥ 16.4 才正确模拟其样式效果。
立即学习“前端免费学习笔记（深入）”；
- Next.js / Nuxt 等框架中，
hidden在服务端只是静态属性，不会触发样式计算，首次加载可能闪现 - 避免在
useEffect或mounted中才加hidden——用户可能看到内容先出现再消失 - 服务端判断是否隐藏，应直接省略渲染，而不是输出带
hidden的标签
hidden，而是什么时候该用它、什么时候该换思路——比如该用条件渲染却硬塞个 hidden，或者该传值却忘了 type="hidden"。 
