JS移除class|极客笔记

JS移除class

在JavaScript中，我们经常需要操作DOM元素的样式，其中一项常用的操作就是添加或移除元素的class。本文将重点讨论如何在JavaScript中移除元素的class。

1. 使用classList属性

在JavaScript中，每个DOM元素都有一个classList属性，它是一个DOMTokenList对象，提供了一组方法来操作元素的class。

1.1. 使用remove方法

classList对象提供了remove方法，用于移除指定的class。如果元素不存在该class，它不会产生任何影响。

const element = document.querySelector('#elementId');
element.classList.remove('className');

1.2. 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remove Class Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv" class="highlight">Hello, World!</div>
    <button onclick="removeClass()">Remove Class</button>

    <script>
        function removeClass() {
            const element = document.querySelector('#myDiv');
            element.classList.remove('highlight');
        }
    </script>
</body>
</html>

点击”Remove Class”按钮后，div元素的背景颜色将由黄色变为默认的白色，表示成功移除了highlight的class。

2. 使用className属性

除了classList属性外，我们还可以通过元素的className属性来操作class。className属性返回一个字符串，包含元素的全部class，我们可以通过修改这个字符串来实现添加或移除class。

2.1. 使用replace方法

我们可以使用字符串的replace方法来移除指定的class。需要注意的是，这种方法会直接替换元素的className属性。

const element = document.querySelector('#elementId');
element.className = element.className.replace('className', '');

2.2. 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remove Class Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv" class="highlight">Hello, World!</div>
    <button onclick="removeClass()">Remove Class</button>

    <script>
        function removeClass() {
            const element = document.querySelector('#myDiv');
            element.className = element.className.replace('highlight', '');
        }
    </script>
</body>
</html>

同样地，点击”Remove Class”按钮后，div元素的背景颜色将由黄色变为默认的白色。