display: none 彻底移除元素导致恢复时需匹配原始类型，否则布局错乱；与visibility、opacity本质区别在于是否脱离文档流、占位及交互性；js操作须同步class与aria属性。
display 属性是隐藏 HTML 元素最直接、最彻底的方式，但它不是“开关式”切换的万能解——用错值或忽略上下文，反而会导致布局错乱、交互失效或可访问性问题。
为什么 display: none 一设就“消失”，但再显示却不对？
根本原因是：display 不只是控制显隐，它决定了元素在文档流中的“身份”。display: none 让元素完全退出渲染流程，浏览器连它的盒模型都不计算；而恢复时若只写 display: block，可能和原始类型冲突（比如原先是 inline 的 span，强行设 block 会换行、撑宽）。
常见错误现象：
- 点击按钮后元素没出现，检查 DevTools 发现样式被其他规则覆盖（比如父级有
display: flex，子元素设block无效） - 表格单元格（
td）设display: none后，整行塌陷——因为table-cell被移除，破坏了表格结构 - 用 JavaScript 动态设
style.display = ''清空内联样式，结果元素仍不显示——因为 CSS 文件里写了.hidden { display: none; }，class 没删
display 值必须匹配原始渲染类型
不能默认全用 block。浏览器根据元素默认 display 值（由 HTML 规范定义）决定其行为：
-
div、p、section→ 默认display: block -
span、a、strong→ 默认display: inline -
li→ 默认display: list-item -
table、tr、td→ 必须用对应值（table、table-row、table-cell），否则表格结构崩坏
实操建议：
- 查原始类型：右键元素 → “检查”，在 Styles 面板看“Computed”里的
display值 - 恢复显示时，优先复用原始值，而不是硬编码
block - 若不确定，可用 JavaScript 保存原始值：
el.dataset.originalDisplay = getComputedStyle(el).display，之后设回el.style.display = el.dataset.originalDisplay
与 visibility 和 opacity 的关键区别在哪？
三者都让内容“看不见”，但影响完全不同：
-
display: none：元素脱离文档流，不占空间，不可聚焦，不触发任何事件（click、hover全失效），屏幕阅读器跳过 -
visibility: hidden：仍占空间，可聚焦（tab 键能停在上面），但鼠标事件不响应，屏幕阅读器通常跳过 -
opacity: 0：占空间，可交互（click、focus、hover全有效），屏幕阅读器仍读取，常用于淡入动画
选哪个，取决于你要隐藏的“目的”：
- 临时折叠侧边栏、标签页面板 → 用
display（性能好、语义清） - 做 hover 提示框的“预加载占位” → 用
visibility: hidden（保持布局稳定） - 需要过渡动画或保留键盘焦点链 → 用
opacity+pointer-events: none控制交互
JavaScript 控制 display 时最容易漏掉的两件事
纯 CSS 切换安全，但 JS 动态操作容易踩坑：
- 不要只改
style.display：它只影响内联样式。如果元素有 class 如.hidden { display: none !important; }，JS 设置会被无视。必须同步操作 class：el.classList.remove('hidden') - 别忘了可访问性属性：隐藏后应加
aria-hidden="true"，显示后设为"false"；若隐藏的是主内容区，还要考虑tabindex="-1"防止键盘聚焦到不可见区域
一个最小可靠切换函数示例：
function toggleElement(el, show) {
if (show) {
el.style.display = '';
el.removeAttribute('aria-hidden');
} else {
el.style.display = 'none';
el.setAttribute('aria-hidden', 'true');
}
}
复杂点在于：你得知道这个元素是不是原本就靠 CSS class 控制显隐，有没有 !important，是否嵌套在 flex 或 grid 容器里——这些都会让 display 表现不一致。真正稳定的方案，永远是统一用 class 切换，而不是直接碰 style.display。
