Javascript：通过 classList 操作类控制CSS

听海边涛声

于 2024-06-19 19:47:19 发布

阅读量192

点赞数

文章标签： javascript css 开发语言

本文链接：https://blog.csdn.net/panghuangang/article/details/139810854

版权

为了解决className 容易覆盖以前的类名的问题，可以通过classList方式追加和删除类名。

语法形式：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类：有这个类就删掉，没有这个类就加上
元素.classList.toggle('类名')

示例：增加一个类

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      color: #333;
    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">文字</div>
  <script>
    // 通过classList来增加一个类
    // 1. 获取元素
    const box = document.querySelector('.box')
    // 2. 修改样式
    box.classList.add('active')
  </script>
</body>

</html>

展示效果：
在这里插入图片描述

在浏览器工具中查看，现在div元素上有两个类：
在这里插入图片描述

示例：移除类

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      color: #333;
    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">文字</div>
  <script>
    // 1. 获取元素
    const box = document.querySelector('.box')
    // 删除类
    box.classList.remove('box')
  </script>
</body>

</html>

在浏览器开发者工具中查看，类被删除了：
在这里插入图片描述

切换类：以前没有这个类，就加上

下面示例中，div元素以前没有active这个类，执行toggle(‘active’)以后，就增加了active类：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      color: #333;
    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">文字</div>
  <script>
     // 1. 获取元素
    const box = document.querySelector('.box')
    // 切换类, toggle，有这个类就删掉，没有这个类就就加上
    box.classList.toggle('active')
  </script>
</body>

</html>

浏览器开发者工具中查看，增加了active类：
在这里插入图片描述

切换类：以前有这个类，就删除

下面示例中，div元素以前有active这个类，执行toggle(‘active’)以后，就删除了active类：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      color: #333;
    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box active">文字</div>
  <script>
    // 1. 获取元素
    const box = document.querySelector('.box')
    // 2. 修改样式
    // 切换类, toggle，有这个类就删掉，没有这个类就就加上
    box.classList.toggle('active')
  </script>
</body>

</html>