【JavaScript】DOM---操作元素样式属性详解

DOM（Document Object Model）是 Web 开发中的核心技术，它使开发者能够通过 JavaScript 动态操控 HTML 文档结构和样式。在实际开发中，操作元素的样式是非常常见的需求。本文将详细介绍如何通过 style 属性、className 属性和 classList 方法来操作 DOM 元素的 CSS 样式，帮助开发者灵活控制页面的外观。

一、通过 style 属性操作 CSS

1. 直接使用 style 属性设置样式

style 属性是 DOM 中最简单直接的方式，用于动态修改元素的内联样式。内联样式的优点是它能在不影响其他样式的情况下，直接应用于指定的元素。通过 JavaScript 可以轻松访问并修改元素的 style 属性。

例如，假设我们有如下的 HTML 元素：

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

通过 JavaScript 修改该元素的样式，可以这样实现：

const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.width = '200px';

执行这段代码后，div 的背景颜色会从红色变成蓝色，宽度从 100px 增加到 200px。

2. 常见问题：使用驼峰命名

在 JavaScript 中，CSS 属性名通常需要使用驼峰式命名。比如，background-color 在 JavaScript 中需要写成 backgroundColor，而 font-size 则要写成 fontSize。这是因为 style 属性遵循 JavaScript 的命名规则。

3. 操作多个样式

通过 style 属性，我们可以对单个样式进行操作，但如果需要批量修改多个样式，直接使用 style 进行设置可能会显得冗余。对于这种情况，使用 className 或 classList 来批量管理样式会更加高效。

box.style.cssText = 'width: 300px; height: 300px; background-color: green;';

在上面的代码中，通过 cssText 可以一次性设置多个 CSS 样式。

二、通过 className 操作类名控制 CSS

1. 什么是 className 属性？

className 属性用于获取或设置元素的 class 属性值。使用 className 操作可以更为简便地控制元素的样式，因为我们可以通过设置类名来切换元素的外观，而不需要逐个修改内联样式。

<div id="box" class="red-box"></div>

假设我们已经在 CSS 文件中定义了以下两个类：

.red-box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.blue-box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

通过 JavaScript，我们可以轻松切换元素的类，从而改变它的样式：

const box = document.getElementById('box');
box.className = 'blue-box';

此时，box 的背景颜色会变成蓝色。

2. className 的优势

使用 className 的一个主要优势是你可以预先在 CSS 文件中定义好复杂的样式规则，然后通过简单地修改类名来应用这些样式。相比直接使用 style 属性逐条设置样式，className 更加灵活且便于维护。

3. 替换类名的注意事项

使用 className 时需要注意的是，它会直接替换掉元素原有的类名。如果元素原本有多个类名，在赋值时可能会导致其他类被覆盖。

例如，如果元素原本有两个类 box red-box，我们直接赋值：

box.className = 'blue-box';

那么 red-box 会被移除，box 的类名变成了 blue-box，从而导致 red-box 相关的样式失效。为了解决这个问题，可以使用 classList。

三、通过 classList 操作类控制 CSS

1. 什么是 classList？

classList 是 DOM 元素提供的一个用于操作类名的接口，它允许你通过添加、移除、切换等方法灵活管理元素的类名。与 className 不同，classList 可以更加精细地操作类，而不会覆盖其他已有的类。

2. 常用方法

classList 提供了几个常用的操作方法：

• add(className)：为元素添加指定的类名。
• remove(className)：移除元素的指定类名。
• toggle(className)：如果元素有指定的类名，则移除它；如果没有，则添加它。
• contains(className)：检查元素是否包含指定的类名。

3. 示例：添加和移除类名

<div id="box" class="box red-box"></div>

我们可以通过 classList 动态操作类名，例如：

const box = document.getElementById('box');

// 添加类名
box.classList.add('blue-box');

// 移除类名
box.classList.remove('red-box');

上述操作中，box 元素会移除 red-box 类，同时添加 blue-box 类。相比 className，这种方式不会覆盖掉元素已有的其他类名。

4. toggle 方法的使用

toggle 是一个非常有用的方法，尤其适用于需要根据条件动态切换类名的场景。toggle 可以简化很多条件判断的逻辑，比如实现元素的显示与隐藏：

const box = document.getElementById('box');
box.classList.toggle('hidden');  // 如果类名 'hidden' 存在则移除，否则添加

这种方式可以避免编写复杂的 if 判断逻辑，极大简化代码的可读性。

5. contains 方法的使用

contains 方法用于检查元素是否具有某个类名，常用于需要对元素的状态进行判断时：

if (box.classList.contains('blue-box')) {
  console.log('The box is blue');
} else {
  console.log('The box is not blue');
}

这种方法可以帮助我们方便地检查元素的样式状态，并作出相应的逻辑处理。

四、实际应用场景

1. 动态切换主题

在实际项目中，classList 可以用来实现一些高级功能，比如动态切换网站的主题。我们可以通过添加或移除特定的类名来改变页面的整体外观，而不需要重新加载页面。

const themeButton = document.getElementById('theme-button');
themeButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
});

当点击按钮时，页面会在 dark-theme 和普通主题之间切换。dark-theme 类可以在 CSS 中预先定义好，比如：

.dark-theme {
  background-color: #333;
  color: #fff;
}

2. 表单验证样式

在表单验证中，classList 也可以用来快速地为输入框添加错误或成功的样式。例如，当用户输入的值不符合要求时，可以为输入框添加 error 类：

if (input.value === '') {
  input.classList.add('error');
} else {
  input.classList.remove('error');
}

通过这种方式，我们可以非常方便地控制表单的样式变化，增强用户体验。

五、总结

在 Web 开发中，通过 style、className 和 classList 操作 DOM 元素的 CSS 样式是非常常见的需求。style 属性适用于快速操作内联样式，但在处理复杂样式时显得不够灵活。相比之下，className 和 classList 提供了更强大的方式来管理元素的类名，使样式控制变得更加便捷和可维护。

推荐：

• JavaScript
• react
• vue

---