当前位置：首页 > JavaScript

js 实现变宽

2026-03-02 07:11:02JavaScript

实现元素宽度动态变化的方法

在JavaScript中实现元素宽度动态变化可以通过多种方式实现，以下是几种常见的方法：

使用style.width属性直接修改 通过获取DOM元素后直接修改其style.width属性是最直接的方式：

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

使用classList切换CSS类 定义不同宽度的CSS类，通过切换类名实现宽度变化：

js 实现变宽

.width-small { width: 100px; }
.width-medium { width: 200px; }
.width-large { width: 300px; }

const element = document.querySelector('.resizable');
element.classList.remove('width-small');
element.classList.add('width-large');

使用CSS变量动态控制 通过JavaScript修改CSS变量值实现响应式宽度变化：

:root {
  --dynamic-width: 200px;
}
.resizable {
  width: var(--dynamic-width);
}

document.documentElement.style.setProperty('--dynamic-width', '400px');

动画效果实现平滑过渡 结合CSS transition实现平滑的宽度变化效果：

js 实现变宽

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

const box = document.getElementById('animatedBox');
box.style.width = `${Math.random() * 300 + 100}px`;

响应式窗口大小变化 根据窗口尺寸动态调整元素宽度：

function handleResize() {
  const element = document.getElementById('responsiveElement');
  element.style.width = `${window.innerWidth * 0.8}px`;
}
window.addEventListener('resize', handleResize);

使用requestAnimationFrame实现动画 实现流畅的宽度动画效果：

function animateWidth(element, targetWidth, duration) {
  const startWidth = parseInt(element.style.width) || 0;
  const startTime = performance.now();

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

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

注意事项