在前端开发中，我们通常需要使用JavaScript来动态修改HTML元素的CSS类。但是，当我们需要删除CSS类时，很多人会使用jQuery的removeClass()方法。然而，如果您想不使用jQuery，也可以轻松地通过纯JavaScript实现这一点。本文将介绍如何使用原生JavaScript从HTML元素中删除CSS类。
基本思路
要删除HTML元素中的CSS类，我们需要使用两个方法：querySelector()和classList属性。其中，querySelector()用于获取需要修改的HTML元素，classList属性则提供了一组方法，用于添加、删除和切换CSS类。
删除CSS类
要删除元素中的一个或多个CSS类，我们可以使用remove()方法。该方法接受一个或多个类名作为参数，这些类名将从元素的classList属性中删除。例如，以下代码将删除名为“my-class”的CSS类：
const element = document.querySelector('#my-element');
element.classList.remove('my-class');如果要删除多个CSS类，请将它们作为多个参数传递给remove()方法，如下所示：
element.classList.remove('class1', 'class2', 'class3');示例代码
下面是一个完整的代码示例，演示如何使用原生JavaScript从HTML元素中删除CSS类：
-- -------------------- ---- -------
--------- -----
------
------
------------- --- ----- ---------------
-------
--------- -
------ ----
------------ -----
-
--------
-------
------
---- --------------- ----------------------- ------------
------- ------------------------------ --------------
--------
-------- ------------- -
----- ------- - --------------------------------------
-------------------------------------
-
---------
-------
-------在这个例子中，我们有一个具有“my-class”CSS类的<div>元素。当单击页面上的按钮时，removeClass()函数将从该元素中删除CSS类。
结论
通过使用原生JavaScript的querySelector()和classList属性，我们可以轻松地从HTML元素中删除CSS类，而无需使用jQuery等外部库。这种方法对于开发人员来说非常方便，因为他们可以仅仅通过JavaScript达到目的，而不需要学习额外的工具或框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8202