当前位置：首页 > JavaScript

js点击实现隐藏

2026-04-07 09:19:39JavaScript

使用 `style.display` 控制显示与隐藏

通过修改元素的 display 属性实现隐藏和显示切换。

document.getElementById('elementId').addEventListener('click', function() {
  const element = document.getElementById('targetElement');
  element.style.display = element.style.display === 'none' ? 'block' : 'none';
});

适用于需要完全移除元素占位的场景。

使用 `classList.toggle` 切换 CSS 类

通过 CSS 类控制隐藏状态，保持逻辑与样式分离。
CSS 部分：

.hidden {
  display: none;
}

JavaScript 部分：

js点击实现隐藏

document.getElementById('elementId').addEventListener('click', function() {
  document.getElementById('targetElement').classList.toggle('hidden');
});

适合需要复用隐藏样式或添加动画效果的场景。

使用 `visibility` 属性隐藏元素

隐藏元素但保留其占位空间：

document.getElementById('elementId').addEventListener('click', function() {
  const element = document.getElementById('targetElement');
  element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
});

适用于需要保持页面布局稳定的情况。

js点击实现隐藏

结合动画效果淡入淡出

通过透明度过渡实现平滑隐藏：
CSS 部分：

.fade {
  opacity: 0;
  transition: opacity 0.5s;
}

JavaScript 部分：

document.getElementById('elementId').addEventListener('click', function() {
  const element = document.getElementById('targetElement');
  element.classList.toggle('fade');
});

适合需要提升用户体验的动态效果。