当前位置：首页 > JavaScript

js实现显示隐藏

2026-04-03 21:58:45JavaScript

使用 display 属性切换显示/隐藏

通过修改元素的 style.display 属性实现：

// 隐藏元素
document.getElementById('elementId').style.display = 'none';

// 显示元素
document.getElementById('elementId').style.display = 'block'; // 或 'inline' 等原始显示方式

使用 visibility 属性保持布局

当需要隐藏元素但保留其占据的空间时：

// 隐藏元素（保留空间）
document.getElementById('elementId').style.visibility = 'hidden';

// 显示元素
document.getElementById('elementId').style.visibility = 'visible';

使用 classList 切换 CSS 类

定义 CSS 类：

.hidden {
  display: none;
}

JavaScript 操作：

js实现显示隐藏

const element = document.getElementById('elementId');
// 隐藏
element.classList.add('hidden');
// 显示
element.classList.remove('hidden');
// 切换
element.classList.toggle('hidden');

淡入淡出效果

结合 CSS transition 实现动画：

.fade {
  opacity: 0;
  transition: opacity 0.3s;
}
.fade.show {
  opacity: 1;
}

JavaScript 控制：

js实现显示隐藏

const element = document.getElementById('elementId');
// 淡出
element.classList.remove('show');
// 淡入
element.classList.add('show');

高度动画效果

通过改变 height 实现展开/折叠：

const element = document.getElementById('elementId');
if (element.style.height === '0px') {
  element.style.height = element.scrollHeight + 'px';
} else {
  element.style.height = '0px';
}

需要配合 CSS 使用：

.collapsible {
  overflow: hidden;
  transition: height 0.3s ease;
}

使用 jQuery 简化操作

如果项目中使用 jQuery：

// 显示/隐藏
$('#elementId').show();
$('#elementId').hide();
$('#elementId').toggle();

// 淡入淡出
$('#elementId').fadeIn();
$('#elementId').fadeOut();
$('#elementId').fadeToggle();

// 滑动效果
$('#elementId').slideDown();
$('#elementId').slideUp();
$('#elementId').slideToggle();

标签: js