在前端开发中，我们通常需要操作文档对象模型（Document Object Model, DOM），对文档中的元素进行增删改查等操作。其中，通过添加和删除 class 来修改元素的样式是比较常见的需求。那么，本文将着重介绍如何使用纯 JavaScript 的方式删除元素的 class。
什么是 class？
class 是 HTML 元素的一种属性，它可以用于指定该元素的样式。一个元素可以拥有多个 class，每个 class 都是由空格分隔的字符串。例如：
<div class="container main-content"></div>
上面这个 div 元素拥有两个 class，分别为 "container" 和 "main-content"。通过 class，我们可以在 CSS 中针对不同的元素设置不同的样式，从而实现样式与内容分离的目的。
如何删除 class？
在 JavaScript 中，我们可以通过元素的 classList 属性来读写其 class。classList 是一个只读属性，它返回一个类数组对象，包含了该元素的所有 class。例如：
const element = document.querySelector('.container');
console.log(element.classList); // ["container", "main-content"]在 classList 上，有一些方法可以用来增加、删除和查询元素的 class。具体地：
add(className)：将指定的 class 添加到元素中。remove(className)：从元素中删除指定的 class。toggle(className)：如果元素中已经存在指定的 class，则删除它；否则，添加它。contains(className)：判断元素是否包含指定的 class。
因此，要删除元素的 class，我们只需要调用 classList 上的 remove() 方法，并传入要删除的 class 名称即可。例如：
const element = document.querySelector('.container');
element.classList.remove('main-content');上面的代码会从 element 元素中删除名为 "main-content" 的 class。
示例代码
下面是一个完整的示例，展示了如何使用纯 JavaScript 删除元素的 class：
-- -------------------- ---- -------
--------- -----
------
------
------------- ----- ---------------
-------
------
---- ---------------- --------------------
--------
----- ------- - -------------------------------------
-----------------------------------------
---------
-------
-------在这个示例中，我们首先定义了一个 HTML 页面，并在其中包含了一个有两个 class 的 div 元素。然后，在页面的底部，我们通过 JavaScript 选取该元素，并调用其 classList 上的 remove() 方法来删除其中的 "main-content" class。最终结果是，该 div 元素只剩下了 "container" 这个 class。
总结
本文介绍了如何使用纯 JavaScript 删除元素的 class。通过对 classList 属性的操作，我们可以轻松地增加、删除和查询元素的 class。希望本文能对你有所帮助，让你更加熟练地运用 JavaScript 操作 DOM。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30067