当前位置：首页 > JavaScript

js实现调整宽度

2026-03-16 01:21:25JavaScript

调整元素宽度的 JavaScript 方法

直接修改 style.width 属性
通过 JavaScript 直接修改元素的 style.width 属性是最简单的方法。例如，将 ID 为 myElement 的宽度设置为 300px：

document.getElementById('myElement').style.width = '300px';

使用 classList 添加/移除样式类
通过添加或移除 CSS 类来间接控制宽度。首先定义 CSS 类：

js实现调整宽度

.width-300 { width: 300px; }
.width-50p { width: 50%; }

然后通过 JavaScript 切换类：

const element = document.getElementById('myElement');
element.classList.add('width-300');  // 添加固定宽度
element.classList.remove('width-50p'); // 移除百分比宽度

动态计算宽度值
结合计算属性动态调整宽度。例如，根据父容器宽度设置子元素为一半宽度：

js实现调整宽度

const parentWidth = document.getElementById('parent').offsetWidth;
document.getElementById('child').style.width = `${parentWidth / 2}px`;

使用 requestAnimationFrame 平滑过渡
实现动画效果的宽度调整：

let width = 100;
const element = document.getElementById('myElement');
function animate() {
  width += 1;
  element.style.width = `${width}px`;
  if (width < 200) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

响应式调整（监听窗口变化）
通过监听 resize 事件实现响应式宽度调整：

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