js实现调整宽度

调整元素宽度的 JavaScript 方法

直接修改 style.width 属性

通过 JavaScript 直接修改元素的 style.width 属性可以调整宽度。这种方式会直接作用于元素的内联样式。

const element = document.getElementById('myElement');
element.style.width = '200px';

使用 classList 添加/移除样式类

通过添加或移除预定义的 CSS 类来调整宽度。这种方法更易于维护，适合需要频繁切换样式的场景。

const element = document.getElementById('myElement');
element.classList.add('wide-class');  // 添加宽度样式类
element.classList.remove('narrow-class');  // 移除原有样式类

动态计算并设置宽度

根据其他元素或窗口尺寸动态计算宽度。适用于响应式布局。

const element = document.getElementById('myElement');
const parentWidth = element.parentElement.offsetWidth;
element.style.width = `${parentWidth * 0.8}px`;  // 设置为父元素宽度的80%

使用 CSSOM 的 CSSStyleDeclaration

通过 window.getComputedStyle 获取当前样式后进行调整。

const element = document.getElementById('myElement');
const styles = window.getComputedStyle(element);
const currentWidth = parseFloat(styles.width);
element.style.width = `${currentWidth + 50}px`;  // 增加50px

动画方式调整宽度

使用 requestAnimationFrame 实现平滑的宽度变化动画。

function animateWidth(element, targetWidth, duration) {
    const startWidth = parseFloat(window.getComputedStyle(element).width);
    const startTime = performance.now();

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

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

    requestAnimationFrame(updateWidth);
}

animateWidth(document.getElementById('myElement'), 300, 1000);  // 1秒内变为300px

响应式调整宽度

监听窗口大小变化并相应调整元素宽度。

function handleResize() {
    const element = document.getElementById('myElement');
    element.style.width = `${window.innerWidth * 0.5}px`;
}

window.addEventListener('resize', handleResize);
handleResize();  // 初始调用

使用 CSS 变量动态控制

通过修改 CSS 变量值来调整宽度，适用于需要统一控制多个元素的情况。

// CSS中定义变量
// :root { --element-width: 200px; }

document.documentElement.style.setProperty('--element-width', '300px');

注意事项

• 使用 offsetWidth 获取的是整数像素值
• clientWidth 不包含边框和滚动条
• scrollWidth 包含内容实际宽度（包括溢出部分）
• 百分比值需要确保父元素有明确宽度定义
• 性能敏感场景建议使用 transform: scaleX 替代宽度调整