当前位置：首页 > JavaScript

js 实现收缩

2026-04-06 12:56:54JavaScript

实现元素收缩的 JavaScript 方法

通过修改 CSS 属性实现收缩

使用 style 属性直接控制元素的 height 或 width，适用于快速切换固定尺寸：

const element = document.getElementById('target');
element.style.height = '0px'; // 收缩高度
element.style.width = '50%'; // 收缩宽度至原50%

通过 classList 切换预设样式

定义收缩状态的 CSS 类，通过 JavaScript 动态切换：

js 实现收缩

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

document.querySelector('.toggle-button').addEventListener('click', () => {
  document.getElementById('content').classList.toggle('collapsed');
});

使用动画实现平滑收缩

结合 requestAnimationFrame 实现逐帧动画：

js 实现收缩

function collapse(element, duration = 300) {
  const startHeight = element.offsetHeight;
  const startTime = performance.now();

  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    element.style.height = `${startHeight * (1 - progress)}px`;

    if (progress < 1) {
      requestAnimationFrame(animate);
    } else {
      element.style.display = 'none';
    }
  }
  requestAnimationFrame(animate);
}

响应式收缩布局

根据窗口大小动态调整收缩状态：

window.addEventListener('resize', () => {
  const panel = document.getElementById('responsive-panel');
  panel.style.width = window.innerWidth < 768 ? '0' : '250px';
});

注意事项