如何隐藏一个元素

【常见方法对比】

方法	是否占据空间	是否可交互	是否触发重绘/回流	典型场景
display:none	❌ 不占空间	❌ 不可交互	回流+重绘	完全移除元素（菜单切换、Tab 切换）
visibility:hidden	✅ 占空间	❌ 不可交互	重绘	保留布局避免抖动
opacity:0	✅ 占空间	✅ 可交互(可用 pointer-events:none 禁止)	重绘	需要动画渐变或保留点击区域
position:absolute + 远移	❌/✅(取决于定位)	❌	回流	需要保留 DOM 但彻底移出可视区
clip-path / transform:scale(0)	✅ 占空间	❌(可配合 pointer-events)	重绘/GPU	动画、过渡
z-index:-1	✅ 占空间	❌(被其他元素覆盖)	重绘	简单遮挡，不推荐作为隐藏
aria-hidden="true"	✅	✅	无	仅无障碍隐藏（屏幕阅读器不可见）

 

⚠️ 使用注意

1、动画需求：如果需要渐隐渐现，用 opacity + transition，因为display 无法过渡
2、布局影响：display: none 会导致周围元素重新计算布局( 回流 )，如果需要频繁切换 性能开销较大
3、可访问性：仅视觉隐藏但是 可以被屏幕阅读器访问，考虑使用 aria-hidden=true
4、交互控制：opacity: 0 可以点击，可以通过 pointer-events: none 禁止

 

🎯 面试小技巧

“选择隐藏方式要看需求：
完全移除用 display:none，
保留位置用 visibility:hidden，
需要渐变动画用 opacity:0 配合 pointer-events:none。”