js实现隐藏
使用CSS类切换隐藏元素
通过添加或移除CSS类来控制元素的显示与隐藏。定义一个.hidden类，设置display: none，然后用JavaScript切换该类。
.hidden {
display: none;
}// 隐藏元素
element.classList.add('hidden');
// 显示元素
element.classList.remove('hidden');直接修改style属性
通过JavaScript直接操作元素的style.display属性实现即时隐藏，无需预定义CSS类。
// 隐藏元素
element.style.display = 'none';
// 显示元素（根据需求恢复为block/inline等）
element.style.display = 'block';切换visibility属性
使用visibility: hidden隐藏元素时保留布局空间，与display: none不同。
// 隐藏元素（保留占位）
element.style.visibility = 'hidden';
// 显示元素
element.style.visibility = 'visible';动态修改opacity实现淡出
通过透明度变化实现渐变隐藏效果，适合需要动画过渡的场景。
// 渐变隐藏（可配合transition CSS）
element.style.opacity = '0';
// 恢复显示
element.style.opacity = '1';使用hidden HTML属性
HTML5原生支持的hidden属性，现代浏览器普遍兼容。
// 隐藏元素
element.hidden = true;
// 显示元素
element.hidden = false;通过DOM移除节点
彻底从DOM中移除元素，适用于需要完全销毁的场景。
// 隐藏并移除元素
const parent = element.parentNode;
parent.removeChild(element);
// 重新添加需保存节点引用条件渲染（框架场景）
在React/Vue等框架中，通常通过状态控制条件渲染实现动态隐藏。
// React示例
{ isVisible && <div>内容</div> }// Vue示例
<div v-if="isVisible">内容</div>注意事项
display: none会触发重排（reflow），影响性能敏感场景需谨慎使用- 屏幕阅读器可访问性需考虑，必要时使用
aria-hidden属性配合 - 频繁切换显示/隐藏时建议使用
requestAnimationFrame优化性能
