JS 删除class|极客笔记

JS 删除class

在前端开发中，经常会遇到需要操作元素的class属性的情况。通过JS来删除一个元素的class是一种常见的操作，本文将详细介绍如何使用JS来删除一个元素的class。

1. 获取元素

在删除一个元素的class之前，首先需要获取到这个元素。可以通过document.getElementById()、document.getElementsByClassName()、document.querySelector()等方法来获取元素。

下面是一个示例，通过document.getElementById()方法获取id为”demo”的元素：

var element = document.getElementById("demo");

2. 删除class

获取到元素之后，就可以使用classList.remove()方法来删除元素的class。这个方法接收一个参数，即要删除的class的名称。

下面是一个示例，删除元素的class为”active”：

element.classList.remove("active");

3. 完整示例

下面是一个完整的示例代码，结合获取元素和删除class操作：

<!DOCTYPE html>
<html>
<head>
    <title>Remove Class Example</title>
</head>
<body>

<div id="demo" class="active">Hello, World!</div>

<script>
    var element = document.getElementById("demo");
    element.classList.remove("active");
</script>

</body>
</html>

在上面的示例中，首先在<div>元素中添加了一个class为”active”，然后通过JS代码获取这个元素，并删除了它的”active” class。