在前端开发中，经常需要通过JavaScript来操作DOM元素的样式。而其中一个常见的操作就是给DOM元素动态地添加、移除或切换类名。那么在JavaScript中，我们有两种常用的方法可以实现这个功能。
1. 使用classList属性
在DOM元素上，有一个classList属性，它代表了DOM元素的类名集合。我们可以使用它的方法来方便地操作类名。
add(className): 添加一个类名remove(className): 移除一个类名toggle(className): 如果有指定的类名则移除他，没有则添加
例如，我们有一个按钮元素，初始没有任何类名：
<button id="myButton">Click me</button>
我们可以通过JavaScript代码给它添加一个名为active的类名：
var button = document.getElementById('myButton');
button.classList.add('active');
同时，我们也可以移除一个类名：
button.classList.remove('active');
通过toggle方法，我们还可以方便地切换类名的状态：
button.classList.toggle('active');
2. 使用className属性
除了classList属性，我们还可以使用className属性来操作DOM元素的类名。不过相对于classList，className的操作相对简单，主要是直接设置或获取类名字符串。
我们可以通过直接设置className属性来添加一个类名：
button.className = 'active';
注意，直接设置className属性会直接覆盖原有的类名，所以如果我们需要多个类名，可以使用字符串拼接来达到目的：
button.className = 'button active';
如果我们需要移除一个类名，可以通过替换的方式：
button.className = button.className.replace('active', '');
此外，我们可以通过获取className属性来获取当前的类名字符串：
var classNames = button.className;
总结
通过以上两种方法，我们可以在JavaScript中方便地添加、移除或切换DOM元素的类名。在实际开发中，我们可以根据具体的操作需求选择使用哪个方法。classList属性灵活且支持多个类名操作，而className属性则操作简单直接。同时，不管哪种方法，我们都需要谨慎处理类名的命名，以确保代码的可读性和可维护性。
希望本篇博客对你了解JS添加类名的两种方法有所帮助！
本文来自极简博客，作者：紫色风铃，转载请注明原文链接：JS添加类名的两种方法
