在前端开发中，经常需要根据用户交互、页面状态变化等场景动态修改页面元素的样式，这时候就需要在JavaScript中操作CSS样式。不同的场景适合不同的实现方式，下面介绍几种常用的动态添加CSS样式的方法。
方法一：直接修改元素的style属性
这种方式适合修改单个元素的少量样式，操作起来最简单直接，会直接给元素添加内联样式，优先级较高。
// 获取需要修改样式的元素
const targetElement = document.getElementById('demo');
// 直接修改style属性，属性名采用驼峰命名法
targetElement.style.backgroundColor = 'lightblue';
targetElement.style.fontSize = '16px';
targetElement.style.padding = '10px';
需要注意的是，CSS属性名中带有短横线的，在JavaScript中需要转换成驼峰命名，比如<background-color>要写成<backgroundColor>，<font-size>要写成<fontSize>。
方法二：创建style标签插入样式规则
如果需要给多个元素添加相同的样式，或者需要添加比较复杂的样式规则，可以动态创建<style>标签，把样式规则写入标签内容中，再插入到页面的<head>里。
// 创建style标签
const styleTag = document.createElement('style');
// 设置样式规则，这里可以给多个元素定义样式
styleTag.innerHTML = `
.dynamic-class {
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
}
.dynamic-class:hover {
background-color: #f5f5f5;
}
`;
// 把style标签插入到head中
document.head.appendChild(styleTag);
这种方式添加的样式会作用于所有匹配选择器的元素，适合批量修改样式，而且样式规则可以写得很完整，支持伪类、媒体查询等复杂CSS特性。
方法三：通过修改元素的className添加样式
这种方式是提前在CSS文件中定义好对应的类样式，然后在JavaScript中动态给元素添加或移除类名，是最推荐的做法，样式和结构、行为分离，便于维护。
首先提前在CSS中定义好样式类：
/* 提前定义的样式类 */
.highlight {
background-color: yellow;
font-weight: bold;
color: red;
}
然后在JavaScript中动态操作类名：
const element = document.querySelector('.content');
// 添加类名
element.classList.add('highlight');
// 如果需要移除类名可以使用remove方法
// element.classList.remove('highlight');
// 切换类名，有则移除无则添加
// element.classList.toggle('highlight');
方法四：修改元素的cssText属性
如果需要一次性给元素设置多个内联样式，可以使用<cssText>属性，直接赋值完整的样式字符串，会覆盖元素原有的内联样式。
const box = document.getElementById('box');
// 一次性设置多个样式，会覆盖原有的内联style内容
box.style.cssText = 'width: 200px; height: 200px; background-color: orange; margin: 10px auto;';
如果不想覆盖原有样式，可以在赋值的时候拼接原有的<cssText>内容：
box.style.cssText += 'border: 2px solid black;';
不同方法的适用场景对比
| 方法 | 适用场景 | 优先级 | 维护成本 |
|---|---|---|---|
| 修改style属性 | 单个元素少量样式修改 | 高（内联样式） | 低，样式分散在JS中 |
| 创建style标签 | 批量元素、复杂样式规则 | 遵循CSS优先级规则 | 中等，样式规则在JS中定义 |
| 修改className | 常规样式切换、批量修改 | 遵循CSS优先级规则 | 低，样式和结构分离 |
| 修改cssText | 单个元素多样式一次性设置 | 高（内联样式） | 低，容易覆盖原有样式 |
注意事项
- 直接修改<style>属性或者<cssText>添加的是内联样式，优先级高于内部样式表和外部样式表，可能会覆盖原有的CSS规则。
- 使用<classList>操作类名的时候，要注意类名不要写错，避免样式不生效。
- 动态创建的<style>标签如果不再需要，可以及时从DOM中移除，避免样式冗余。
- 如果是在框架中使用，比如Vue、React，优先使用框架提供的样式绑定方式，不要直接操作DOM修改样式。
JavaScript动态添加样式CSS前端开发修改时间：2026-07-14 00:36:25