JavaScript 添加类

在 JavaScript 中，我们可以通过添加类来操作 HTML 元素的样式。下面是一些添加类的方法及示例：

1. 使用 classList

classList 是 DOM 元素的一个属性，它表示元素的类名列表。我们可以使用它来添加、删除和切换类名。

添加类

element.classList.add('class-name');

其中 element 表示要操作的 DOM 元素，class-name 表示要添加的类名。

示例：

const element = document.querySelector('.box');
element.classList.add('active');

上面的示例代码将给类名为 .box 的元素添加了一个名为 active 的类。

删除类

element.classList.remove('class-name');

其中 element 表示要操作的 DOM 元素，class-name 表示要删除的类名。

示例：

const element = document.querySelector('.box');
element.classList.remove('active');

上面的示例代码将从类名为 .box 的元素中删除 active 类。

切换类

element.classList.toggle('class-name');

其中 element 表示要操作的 DOM 元素，class-name 表示要切换的类名。

示例：

const element = document.querySelector('.box');
element.classList.toggle('active');

上面的示例代码将切换类名为 .box 的元素上的 active 类。

2. 使用 className

className 是 DOM 元素的一个属性，它表示元素的类名。我们可以使用它来添加、删除和替换类名。

添加类

element.className += ' class-name';

其中 element 表示要操作的 DOM 元素，class-name 表示要添加的类名。需要注意的是，在 className 中添加类名时要在前面加上一个空格。

示例：

const element = document.querySelector('.box');
element.className += ' active';

上面的示例代码将给类名为 .box 的元素添加了一个名为 active 的类。

删除类

element.className = element.className.replace('class-name', '');

其中 element 表示要操作的 DOM 元素，class-name 表示要删除的类名。需要注意的是，在删除 className 中的类名时要把空格也删除掉。

示例：

const element = document.querySelector('.box');
element.className = element.className.replace('active', '');

上面的示例代码将从类名为 .box 的元素中删除 active 类。

替换类

element.className = element.className.replace('old-class', 'new-class');

其中 element 表示要操作的 DOM 元素，old-class 表示要替换的类名，new-class 表示要替换成的新类名。需要注意的是，在 className 中替换类名时也要把空格考虑进去。

示例：

const element = document.querySelector('.box');
element.className = element.className.replace('old-class', 'new-class');

上面的示例代码将类名为 .box 的元素上的 old-class 替换成了 new-class。

总的来说，使用 classList 操作类名更加直观、方便。但如果需要兼容老版本浏览器，可以使用 className。