在前端开发中，我们通常需要给 HTML 元素添加一些样式或行为。其中，给元素添加类（class）是一种常见的做法。本文将介绍如何使用 JavaScript 动态地向 HTML 元素添加类，并提供相关示例代码。
添加类的基本方法
在 HTML 中，我们可以通过以下方式为元素添加类：
<div class="my-class">This is a div element with the class "my-class".</div>
其中，class 属性用于指定元素的类列表，多个类之间以空格分隔。例如，上述代码中的 div 元素就有一个名为 my-class 的类。
如果我们想要动态地添加类，可以使用 JavaScript。具体来说，我们可以使用元素的 classList 属性进行操作。该属性提供了几个方法，可以用于添加、移除和切换类。
添加类
要向元素添加类，可以使用 add() 方法。以下是一个简单的示例：
<div id="my-div">This is a div element.</div>
<script>
var myDiv = document.getElementById('my-div');
myDiv.classList.add('my-class');
</script>在上述代码中，我们首先获取了 ID 为 my-div 的 div 元素，并将其存储在变量 myDiv 中。然后，我们调用 classList 的 add() 方法，将名为 my-class 的类添加到元素中。
移除类
要从元素中移除类，可以使用 remove() 方法。以下是一个简单的示例：
<div id="my-div" class="my-class">This is a div element with the class "my-class".</div>
<script>
var myDiv = document.getElementById('my-div');
myDiv.classList.remove('my-class');
</script>在上述代码中，我们首先获取了 ID 为 my-div 的 div 元素，并将其存储在变量 myDiv 中。然后，我们调用 classList 的 remove() 方法，将名为 my-class 的类从元素中移除。
切换类
要切换元素的类，可以使用 toggle() 方法。该方法将根据元素是否已经拥有指定的类，来添加或移除该类。以下是一个简单的示例：
-- -------------------- ---- -------
---- ---------------- -- - --- --------------
------- ------------------------------ --------------
--------
-------- ------------- -
--- ----- - ----------------------------------
-----------------------------------
-
---------在上述代码中，我们创建了一个按钮，并通过 onclick 属性将其与 JavaScript 函数 toggleClass() 关联。该函数会获取 ID 为 my-div 的 div 元素，并调用 classList 的 toggle() 方法来切换名为 my-class 的类。
示例代码
以下是一个完整的示例，演示如何使用 JavaScript 向 HTML 元素添加、移除和切换类：
-- -------------------- ---- -------
--------- -----
------
------
---------- ----- ---- ------------------
-------
------
---- ---------------- -- - --- --------------
------- ------------------------ --------------
------- ------------------------------ --------------
------- ------------------------------ --------------
--------
--- ----- - ----------------------------------
-------- ---------- -
--------------------------------
-
-------- ------------- -
-----------------------------------
-
-------- ------------- -
-----------------------------------
-
---------
-------
-------在该示例中，我们创建了一个包含三个按钮的页面。每个按钮都与一个 JavaScript 函数相关联，用于添加、移除或切换名为 my-class 的类。同时，我们也定义了一个用于获取 my-div 元素的变量 `my
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14857