JS 删除class|极客教程

JS 删除class

在前端开发中，我们经常需要操作 HTML 元素的 class 属性，包括添加、删除、切换等操作。本文将详细介绍如何使用 JavaScript 删除元素的 class。

1. 使用原生 JavaScript 方法

首先，我们可以使用 JavaScript 提供的原生方法来删除 HTML 元素的 class 属性。具体方法如下：

var element = document.getElementById("elementId");
element.classList.remove("className");

以上代码中，我们通过 getElementById 方法获取到要操作的 HTML 元素，然后使用 classList.remove 方法来删除指定的 class。其中，elementId 是 HTML 元素的 id 属性值，className 是要删除的 class 名称。

下面是一个简单的示例，演示如何使用原生 JavaScript 删除元素的 class：

<!DOCTYPE html>
<html>
<body>

<button id="myBtn" class="btn">点击我</button>

<script>
var btn = document.getElementById("myBtn");
btn.classList.remove("btn");
</script>

</body>
</html>

运行以上代码，可以看到点击按钮后它的 class 属性会被成功删除。

2. 使用 jQuery 库

另一种常用的方法是使用 jQuery 库来进行操作。jQuery 是一个广泛使用的 JavaScript 库，包含了丰富的 API，极大地简化了 JavaScript 编程。使用 jQuery 删除元素的 class 的代码如下：

$("#elementId").removeClass("className");

以上代码中，我们通过 $ 符号获取到要操作的元素，并使用 removeClass 方法来删除指定的 class。其中，elementId 是 HTML 元素的 id 属性值，className 是要删除的 class 名称。

下面是一个使用 jQuery 删除元素 class 的示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>

<button id="myBtn" class="btn">点击我</button>

<script>
$("#myBtn").removeClass("btn");
</script>

</body>
</html>

运行以上代码，可以看到点击按钮后它的 class 属性会被成功删除。

3. 使用第三方类库

除了原生 JavaScript 和 jQuery，还有许多第三方类库可以帮助我们更方便地删除元素的 class。以下是两种常见的类库：

3.1. lodash 库

lodash 是一个实用的 JavaScript 工具库，提供了许多常用的函数和方法。使用 lodash 删除元素的 class 的代码如下：

import _ from 'lodash';

var element = document.getElementById("elementId");
var classes = _.split(element.className, ' ');
var newClasses = _.pull(classes, "className");
element.className = _.join(newClasses, ' ');

以上代码中，我们首先使用 getElementById 方法获取到要操作的元素，然后使用 lodash 的 split 函数将 class 字符串分割成数组，再使用 pull 函数将要删除的 class 删除，接着使用 join 函数将数组重新拼接成字符串，最后将新的 class 赋值给元素的 className 属性。

3.2. classnames 库

classnames 是一个用于动态创建 CSS class 名称的 JavaScript 库。它可以更灵活地处理 class 名称的拼接和删除。使用 classnames 删除元素的 class 的代码如下：

import classNames from 'classnames';

var element = document.getElementById("elementId");
var newClass = classNames({ [element.className]: true }, { "className": false });
element.className = newClass;

以上代码中，首先使用 getElementById 方法获取到要操作的元素，然后使用 classnames 的函数动态创建一个对象，传入当前元素的原有 class 名称以及要删除的 class 名称。最后将新的 class 赋值给元素的 className 属性。

4. 总结

本文介绍了使用原生 JavaScript、jQuery 和一些常见的第三方类库来删除 HTML 元素的 class 的方法。具体来说，原生 JavaScript 提供了 classList、jQuery 提供了 removeClass 方法，而 lodash 和 classnames 等第三方类库则提供了更灵活、便捷的方式。根据实际情况选择最适合自己项目的方法来操作元素的 class，可以提高开发效率和代码的可维护性。