当前位置：首页 > JavaScript

js 实现变宽

2026-01-31 16:04:29JavaScript

使用 CSS 和 JavaScript 动态调整元素宽度

通过 JavaScript 动态修改元素的 style.width 属性可以实时改变宽度。以下是一个基础实现示例：

const element = document.getElementById('targetElement');
element.style.width = '200px'; // 设置固定宽度
element.style.width = '50%';   // 设置百分比宽度

动画效果实现平滑变宽

结合 CSS 过渡和 JavaScript 实现平滑动画效果：

js 实现变宽

#targetElement {
  transition: width 0.3s ease-in-out;
}

document.querySelector('#resizeButton').addEventListener('click', () => {
  const element = document.getElementById('targetElement');
  element.style.width = element.offsetWidth === 200 ? '400px' : '200px';
});

响应式宽度调整

根据窗口大小动态调整宽度：

js 实现变宽

function responsiveResize() {
  const element = document.getElementById('targetElement');
  element.style.width = window.innerWidth > 768 ? '80%' : '100%';
}

window.addEventListener('resize', responsiveResize);
responsiveResize(); // 初始化执行

拖拽调整宽度

实现拖拽手柄改变宽度的交互：

const resizer = document.getElementById('dragHandle');
let startX, startWidth;

resizer.addEventListener('mousedown', (e) => {
  startX = e.clientX;
  startWidth = parseInt(document.defaultView.getComputedStyle(resizer.parentElement).width, 10);
  document.documentElement.addEventListener('mousemove', doDrag);
  document.documentElement.addEventListener('mouseup', stopDrag);
});

function doDrag(e) {
  resizer.parentElement.style.width = (startWidth + e.clientX - startX) + 'px';
}

function stopDrag() {
  document.documentElement.removeEventListener('mousemove', doDrag);
  document.documentElement.removeEventListener('mouseup', stopDrag);
}

使用 requestAnimationFrame 优化性能

对于高频宽度变化场景，使用动画帧优化：

function animateWidth(element, targetWidth) {
  const startWidth = element.offsetWidth;
  const duration = 500;
  const startTime = performance.now();

  function updateWidth(timestamp) {
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const currentWidth = startWidth + (targetWidth - startWidth) * progress;
    element.style.width = `${currentWidth}px`;

    if (progress < 1) {
      requestAnimationFrame(updateWidth);
    }
  }

  requestAnimationFrame(updateWidth);
}