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">