在前端开发中，我们经常需要使用JavaScript来动态地修改HTML元素的样式。其中一个重要的技术就是添加或删除类名。类名是一种可以应用在HTML元素上的属性，它可以让我们轻松地定义和修改元素的样式。
添加类名的语法
要添加一个类名，我们需要先获取到目标元素，然后使用classList属性中的add()方法：
--- ------- - ------------------------------------- ---------------------------------
这个例子中，我们首先使用document.getElementById()方法获取了一个元素，然后使用classList.add()方法将myClass添加到元素的类列表中。
classList属性是DOM API中新加入的一个属性，在支持ES6的浏览器中都可以使用。如果你需要兼容旧版浏览器，可以使用className属性来代替classList。
为什么要使用addClass？
添加类名可以让我们更加灵活地控制元素的样式。通过添加、移除或切换不同的类名，我们可以实现复杂的交互效果和动画效果。
例如，我们可以创建一个切换菜单的效果：
------- --------------------- ----------------------------- -------------
---- -----------
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
-------------- ------------ - --- --- - --------------------------------- ----------------------------- -
在这个例子中，我们使用classList.toggle()方法来切换open类名。当用户点击按钮时，菜单将以动画的形式展开或收起。
其他常用的方法
除了add()和toggle()方法外，classList属性还有许多其他可用的方法：
remove()：从元素的类列表中删除一个类名。replace(oldClass, newClass)：将元素的类列表中的一个类名替换为另一个类名。contains(className)：检查元素的类列表中是否包含指定的类名，返回一个布尔值。
总结
添加类名是前端开发中非常常见的操作之一。通过使用classList属性，我们可以轻松地添加、删除和修改元素的类名，从而控制元素的样式和行为。同时，通过灵活运用不同的类名，我们可以实现复杂的互动效果和动画效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27433