从JavaScript中删除CSS类（没有jQuery）-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们通常需要使用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类：

----- ------- - --------------------------------------
-------------------------------------

如果要删除多个CSS类，请将它们作为多个参数传递给remove()方法，如下所示：

---------------------------------- --------- ----------

示例代码

下面是一个完整的代码示例，演示如何使用原生JavaScript从HTML元素中删除CSS类：

--------- -----
------

------
  ------------- --- ----- ---------------
  -------
    --------- -
      ------ ----
      ------------ -----
    -
  --------
-------

------
  ---- --------------- ----------------------- ------------
  ------- ------------------------------ --------------

  --------
    -------- ------------- -
      ----- ------- - --------------------------------------
      -------------------------------------
    -
  ---------
-------

-------

在这个例子中，我们有一个具有“my-class”CSS类的<div>元素。当单击页面上的按钮时，removeClass()函数将从该元素中删除CSS类。

结论

通过使用原生JavaScript的querySelector()和classList属性，我们可以轻松地从HTML元素中删除CSS类，而无需使用jQuery等外部库。这种方法对于开发人员来说非常方便，因为他们可以仅仅通过JavaScript达到目的，而不需要学习额外的工具或框架。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/8202