怎样用JavaScript操作CSS样式？

在前端开发中，动态修改页面样式是实现交互效果的常见需求，JavaScript提供了多种操作CSS样式的方式，开发者可以根据具体场景选择合适的方法。

直接修改元素的style属性

每个DOM元素都有style属性，对应元素的内联样式对象，直接修改该属性可以快速设置单个样式。需要注意的是，CSS属性名中的连字符要转换为驼峰命名，比如background-color要写成backgroundColor。

// 获取目标元素
const box = document.getElementById('box');
// 设置单个样式
box.style.width = '200px';
box.style.height = '200px';
box.style.backgroundColor = 'lightblue';
// 批量设置样式（通过cssText，会覆盖原有内联样式）
box.style.cssText = 'width:300px;height:300px;border:1px solid #333;';

通过classList操作类名切换样式

直接修改style属性适合临时调整样式，如果样式规则较多或者需要复用，更推荐通过修改元素的类名来切换样式，这样可以将样式逻辑和JavaScript逻辑分离，便于维护。

元素的classList属性提供了多个方法操作类名：

• add()：添加一个或多个类名
• remove()：移除一个或多个类名
• toggle()：切换类名，有则移除，无则添加
• contains()：判断元素是否包含某个类名

const btn = document.querySelector('.toggle-btn');
const card = document.querySelector('.card');
// 点击按钮切换card的高亮样式
btn.addEventListener('click', () => {
    card.classList.toggle('highlight');
    // 判断当前是否有highlight类
    if (card.classList.contains('highlight')) {
        console.log('当前处于高亮状态');
    }
});
// 添加多个类名
card.classList.add('shadow', 'rounded');
// 移除指定类名
card.classList.remove('rounded');

对应的CSS样式可以提前定义在样式表中：

.card {
    width: 200px;
    height: 200px;
    background-color: #f5f5f5;
    transition: all 0.3s ease;
}
.card.highlight {
    background-color: #ffeb3b;
    border: 2px solid #ffc107;
}
.card.shadow {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

获取元素的计算后样式

如果需要获取元素当前实际生效的样式，而不是内联样式，可以使用window.getComputedStyle()方法，它返回一个包含所有计算后样式属性的对象。

const box = document.getElementById('box');
// 获取计算后的样式对象
const computedStyle = window.getComputedStyle(box);
// 读取指定样式的值
const width = computedStyle.width;
const bgColor = computedStyle.backgroundColor;
console.log(`元素宽度：${width}，背景色：${bgColor}`);

注意getComputedStyle返回的是只读对象，不能直接修改样式，如果需要修改还是要通过上述两种方式操作。

不同操作方式的适用场景

注意事项

在使用JavaScript操作样式时，要注意样式优先级的规则，内联样式的优先级高于样式表中的类样式，所以如果同时用两种方式修改同一个样式，style属性修改的会生效。另外，修改样式可能会触发页面的重排和重绘，频繁操作样式时可以考虑批量修改，或者使用requestAnimationFrame优化性能。

JavaScriptCSS样式style属性classListgetComputedStyle修改时间：2026-06-05 01:51:51