JS添加class名|极客笔记

JS添加class名

在网页开发中，我们经常需要操作元素的样式，其中添加或移除class名是常见的操作之一。通过添加class名，我们可以为元素添加特定的样式，实现页面效果的改变。本文将详细介绍如何使用JavaScript来添加class名。

1. 通过classList属性添加class名

JavaScript 提供了一个classList属性，它是一个类数组对象，包含了元素的所有class名。我们可以通过classList的方法来实现添加、移除、切换、判断等操作。

1.1 添加class名

要为元素添加一个class名，可以使用add()方法。示例如下：

<div id="example" class="box"></div>

const element = document.getElementById('example');
element.classList.add('active');

在上面的示例中，我们选取id为example的元素，然后使用classList对象的add()方法为其添加一个active的class名。

1.2 移除class名

要移除元素的某个class名，可以使用remove()方法。示例如下：

element.classList.remove('box');

这样就可以移除元素中的box类。

1.3 切换class名

使用toggle()方法可以在class名在元素中存在时删除它，否则添加它。示例如下：

element.classList.toggle('active');

1.4 判断是否存在某个class名

通过contains()方法可以判断元素是否包含某个class名。示例：

if (element.classList.contains('active')) {
  console.log('元素有active类！');
}

2. 通过className属性添加class名

除了使用classList属性外，还可以通过直接操作元素的className属性来添加class名。className属性是一个字符串，包含了元素的所有class名。我们可以通过简单地对className属性进行操作来实现添加class名的目的。

2.1 添加class名

要为元素添加一个class名，可以使用+=操作符。示例如下：

element.className += ' active';

在上面的示例中，我们将元素的className属性与一个空格和新的class名进行连接，从而实现添加新的class名。

2.2 移除class名

要移除元素的某个class名，可以通过字符串操作来实现。示例：

element.className = element.className.replace('box', '');

2.3 判断是否存在某个class名

通过indexOf()方法可以判断元素是否包含某个class名。示例：

if (element.className.indexOf('active') !== -1) {
  console.log('元素有active类！');
}

3. 示例

下面我们来看一个完整的示例，演示如何通过JavaScript为元素添加、移除class名并切换样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS添加class名示例</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f0f0f0;
      margin: 20px;
      display: inline-block;
    }

    .active {
      background-color: #ff0000;
    }
  </style>
</head>
<body>
  <div class="box" id="example1"></div>
  <div class="box" id="example2"></div>

  <script>
    const element1 = document.getElementById('example1');
    const element2 = document.getElementById('example2');

    // 添加class名
    element1.classList.add('active');

    // 移除class名
    element2.classList.remove('box');

    // 切换class名
    element2.classList.toggle('active');

    // 判断是否存在某个class名
    if (element1.classList.contains('active')) {
      console.log('元素1有active类！');
    }

    if (element2.classList.contains('active')) {
      console.log('元素2有active类！');
    }
  </script>
</body>
</html>

上面的示例中，我们为两个元素分别添加了active类，并移除了其中一个元素的box类，并切换了第二个元素的active类。在控制台输出了两个元素是否包含active类的结果。