hidden是HTML5布尔属性，设为true时元素不渲染、不占空间、不可聚焦且不被读屏软件识别；生效需无CSS强制覆盖，JS应直接操作el.hidden=true/false而非setAttribute。
hidden属性的基本行为和触发条件
hidden 是 HTML5 原生布尔属性，设置后浏览器会直接隐藏元素，且该元素不参与渲染流（即不占布局空间、不可聚焦、不被屏幕阅读器读取）。它和 display: none 视觉效果相似，但语义更明确——表示“这个内容当前不应被呈现”。
注意：hidden 属性生效的前提是元素本身没有被 CSS 强制覆盖。比如下面这段代码中，hidden 实际不会起作用：
<div hidden style="display: block;">我不会被隐藏</div>
- 必须确保没有内联或外部 CSS 显式声明
display、visibility或opacity来抵消它 - 它对
<template>、<script>等本身不渲染的元素无意义 - 动态添加
hidden属性（如el.hidden = true）等价于el.setAttribute('hidden', '')，但推荐用 JS 的hidden属性操作，更直观
hidden vs display: none 的关键区别
很多人以为两者只是写法不同，其实它们在可访问性和脚本响应上有实质差异：
-
hidden是语义化标记，辅助技术（如读屏软件）默认跳过该元素；而display: none仅是视觉隐藏，某些旧版工具可能仍尝试解析其内容 -
hidden属性变化会触发DOMSubtreeModified（已废弃）或更可靠的MutationObserver监听；而纯 CSS 变更无法被 DOM 事件直接捕获 -
hidden不影响伪元素（如::before），但若父元素有hidden，其所有后代均被隐藏（包括伪元素） - 性能上无差别，但
hidden更轻量——无需额外 CSS 规则，适合服务端直出或静态页面快速控制显隐
JS 中操作 hidden 属性的正确方式
不要用 setAttribute('hidden', 'hidden') 或 removeAttribute('hidden')，虽然能工作，但冗余且易错。DOM 元素原生支持 hidden 属性作为布尔值：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
const el = document.getElementById('my-div');
el.hidden = true; // ✅ 隐藏
el.hidden = false; // ✅ 显示
console.log(el.hidden); // ✅ 返回 true/false，不是字符串
- 设为
true等价于存在hidden属性；设为false则完全移除该属性（不是设成""或"false"） - 检查时直接读
el.hidden，不要用el.hasAttribute('hidden')，因为后者在元素被 JS 动态设为hidden = false后仍可能返回true（如果原始 HTML 里写了hidden） - 注意：初始带
hidden的元素，其el.hidden初始值就是true；没写的则是false
容易忽略的兼容性和继承陷阱
hidden 在所有现代浏览器（Chrome 23+、Firefox 22+、Safari 6.1+、Edge 12+）都支持，IE10/11 不支持——如果需兼容 IE，必须降级为 CSS 控制，并同步操作 style.display。
- 它不继承：子元素不会因为父元素有
hidden而自动获得该属性，但会被隐藏（这是渲染规则，不是属性继承） - 不能用在
<tr>上期望只隐藏某行——它会生效，但部分老浏览器对表格元素的hidden支持不稳定，建议统一用 CSS - 服务端渲染时，若框架（如 Vue/React）未正确处理
hidden的 SSR 输出，可能导致首屏闪动，此时应确认框架版本是否支持该属性直出
真正要注意的是：当一个元素既被 hidden 控制，又被 JavaScript 频繁切换 class 来控制样式时，CSS 优先级可能意外压过 hidden 的效果——这种混合控制方式最容易出问题。
