el.hidden = true 最快且最安全，不触发重排、不覆盖媒体查询、语义清晰、兼容 IE8+；而 style.display = "none" 会破坏响应式规则、强制重排、还原困难。
直接用 el.hidden = true 最快，不触发重排、不污染内联样式、语义清晰，且兼容 IE8+。
为什么不用 style.display = "none" 做快捷操作
它会覆盖 CSS 媒体查询规则，比如你写了 @media (max-width: 768px) { .nav { display: flex; } }，JS 一设 style.display = "none"，小屏下导航栏就永远消失；它还强制浏览器重新计算布局（重排），性能差；而且你得记住元素原本是 block、flex 还是 inline-block，显示时手动还原容易出错。
常见错误现象：document.getElementById("x").style.display = "none" 后，响应式菜单在手机上点不开 —— 就是因为这个内联样式压过了媒体查询。
- 别在快捷操作里硬写
display值，尤其别写死"block" - 如果必须用
display，优先用el.style.display = ""清空内联值，交还给 CSS 控制 - 避免在循环中反复读写
style.display，会强制同步布局
hidden 属性比 class 切换更轻量的场景
当你只是临时开关一个元素、不涉及动画、也不需要 CSS 过渡效果时，el.hidden = true/false 是最干净的选择。它不会影响任何 CSS 规则，不触发重排，也不要求你预定义 .hidden { display: none; } 类。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 表单字段根据 checkbox 状态即时显隐（如“启用高级选项”）
- 加载中提示
#loading的快速开关 - 错误提示
.error-msg的 show/hide 控制
注意：el.hidden 设为 true 后，元素既不可见，也不参与 tab 导航，也不会响应鼠标事件 —— 这比 opacity: 0 或 visibility: hidden 更彻底，也更符合多数“隐藏”需求。
需要过渡动画时，别只靠 display
display 不支持 CSS 过渡，强行加 transition: display 0.3s 完全无效。真要淡入淡出，得组合用 opacity 和 visibility，再配合 pointer-events: none 和 tabindex="-1" 防交互残留。
示例逻辑：
element.style.opacity = "0";
element.style.visibility = "hidden";
element.style.pointerEvents = "none";
element.tabIndex = -1;
// 动画结束后再设 hidden，确保无障碍和 SEO 友好
setTimeout(() => {
element.hidden = true;
}, 300);
反向显示时顺序反过来：先 element.hidden = false，再用 setTimeout 恢复 opacity 和 visibility。
容易踩的坑：
- 只设
opacity: 0却漏掉pointer-events: none→ 用户还能点到隐藏元素 - 用
visibility: hidden但没处理tabindex→ 键盘用户 tab 键仍能聚焦到空白位置 - 动画过程中直接操作
display→ 动画中断，且可能闪一下
真正复杂的显隐逻辑（带动画、状态持久化、多条件联动）建议封装成函数或自定义 hook，而不是堆砌内联样式或重复 if-else。简单开关，el.hidden 就够了；但只要涉及视觉反馈，就得提前想好交互边界和可访问性补救措施。
