js实现隐藏
隐藏元素的常见方法
使用CSS的display属性将元素隐藏
通过设置display: none可以完全移除元素在文档流中的占位，使其不可见且不影响布局。
element.style.display = 'none';通过CSS的visibility属性控制可见性
设置visibility: hidden会隐藏元素但保留其占位空间，适合需要保持布局的情况。
element.style.visibility = 'hidden';动态切换隐藏状态
利用classList添加/移除隐藏类
定义CSS类.hidden { display: none }后，通过以下代码动态切换：
element.classList.toggle('hidden');使用hiddenHTML属性
现代浏览器支持原生hidden属性，直接操作该属性即可：
element.hidden = true; // 隐藏
element.hidden = false; // 显示淡出隐藏效果
结合opacity和transition实现渐变隐藏
通过透明度变化创造平滑的隐藏过渡效果：
.fade-out {
opacity: 0;
transition: opacity 0.5s ease;
}element.classList.add('fade-out');
element.addEventListener('transitionend', () => {
element.style.display = 'none';
});响应式隐藏方案
根据屏幕尺寸条件隐藏元素
使用window.matchMedia()实现响应式隐藏逻辑：
const mediaQuery = window.matchMedia('(max-width: 600px)');
function handleHide(e) {
element.style.display = e.matches ? 'none' : 'block';
}
mediaQuery.addListener(handleHide);
handleHide(mediaQuery);注意事项
display: none会触发重排（reflow），而visibility: hidden只会触发重绘（repaint）。频繁切换显示状态时建议使用requestAnimationFrame优化性能。
表单元素隐藏时仍需提交数据可使用hidden输入框：
<input type="hidden" name="user_id" value="123">
