JavaScript中如何修改元素的样式？

在JavaScript开发中，动态修改页面元素的样式是非常常见的需求，比如根据用户操作切换按钮状态、调整元素尺寸、显示隐藏提示信息等，都可以通过JavaScript操作元素样式实现。本文将介绍几种常用的修改元素样式的方法，涵盖不同场景下的使用方式。

通过style属性修改单个样式

每个DOM元素都有style属性，该属性对应元素的内联样式对象，我们可以直接修改这个对象上的属性来调整元素的样式。需要注意的是，CSS属性中带有短横线的名称，在JavaScript中需要转换成驼峰命名法，比如background-color需要写成backgroundColor。

下面是修改一个div元素背景颜色和字体大小的示例：

// 获取目标元素
const targetDiv = document.getElementById('demo-div');
// 修改背景颜色，对应CSS的background-color
targetDiv.style.backgroundColor = '#f0f0f0';
// 修改字体大小，对应CSS的font-size
targetDiv.style.fontSize = '16px';
// 修改宽度，对应CSS的width
targetDiv.style.width = '200px';

这种方式的优点是操作简单，能直接修改单个样式属性，修改的样式会以内联样式的形式应用到元素上，优先级较高。缺点是如果需要修改多个样式，需要逐个赋值，代码比较冗余，而且直接修改内联样式不利于样式的统一管理。

通过style.cssText批量修改样式

如果需要一次性修改多个样式属性，可以使用style.cssText属性，直接给这个属性赋值CSS字符串，就可以批量设置元素的内联样式。这种方式比逐个修改style属性上的单个属性更加高效。

示例代码如下：

const targetDiv = document.getElementById('demo-div');
// 批量设置多个样式，字符串格式和CSS内联样式写法一致
targetDiv.style.cssText = 'background-color: #e8f5e9; font-size: 18px; width: 300px; height: 150px; border: 1px solid #ccc;';

需要注意的是，直接赋值cssText会覆盖元素原有的内联样式，如果不想覆盖原有样式，可以在原有值的基础上拼接新的样式字符串：

const targetDiv = document.getElementById('demo-div');
// 保留原有内联样式，追加新的样式
targetDiv.style.cssText += 'color: #333; padding: 10px;';

通过classList操作类名修改样式

这种方式是最推荐的做法，核心思路是提前在CSS中定义好对应的样式类，然后通过JavaScript给元素添加、移除或者切换类名，从而应用对应的样式。这种方式实现了样式和逻辑的分离，便于维护。

首先定义CSS样式类：

/* 定义高亮样式类 */
.highlight {
    background-color: #fff3e0;
    color: #ef6c00;
    border: 2px solid #ff9800;
    padding: 15px;
}
/* 定义隐藏样式类 */
.hidden {
    display: none;
}

然后通过classList属性操作元素的类名，classList提供了add、remove、toggle、contains等方法：

const targetDiv = document.getElementById('demo-div');
// 添加highlight类，应用高亮样式
targetDiv.classList.add('highlight');
// 移除hidden类，显示元素
targetDiv.classList.remove('hidden');
// 切换active类，如果元素有这个类就移除，没有就添加
targetDiv.classList.toggle('active');
// 判断元素是否包含某个类
const hasHighlight = targetDiv.classList.contains('highlight');
console.log(hasHighlight); // 输出true

这种方式的优点是样式定义在CSS中，便于统一修改和维护，也符合前端工程化的开发规范，适合大多数需要动态修改样式的场景。

修改外部样式表或内部样式表的规则

如果需要批量修改多个同类型元素的样式，或者修改全局的样式规则，可以直接操作样式表中的CSS规则。这种方式相对少用，一般用于需要动态生成全局样式的场景。

示例代码如下：

// 获取页面中第一个样式表
const styleSheet = document.styleSheets[0];
// 添加一条新的CSS规则，选择所有div元素，设置背景颜色
styleSheet.insertRule('div { background-color: #f5f5f5; }', styleSheet.cssRules.length);

需要注意不同浏览器对样式表操作的权限限制，如果样式表来自跨域资源，可能无法操作。

不同方式的适用场景总结

为了帮助开发者选择合适的方法，下面是不同修改样式方式的对比：

在实际开发中，优先推荐使用classList操作类名的方式修改样式，其次是使用style属性修改单个样式，根据具体需求选择最合适的方法即可。

JavaScript修改元素样式style属性classListcssText修改时间：2026-06-06 07:38:09