JS 添加类名|极客笔记

JS 添加类名

在前端开发中，经常会涉及到对元素添加类名来改变样式或实现一些交互效果。在JavaScript中，我们可以通过操作DOM来实现添加类名的功能。本文将详细介绍如何在JS中添加类名，并给出相应的示例代码和运行结果。

1. 使用classList属性

在现代浏览器中，可以通过元素的classList属性来操作元素的类名。classList是一个只读属性，返回一个元素的类名列表，它包含了多种方法来添加、移除和切换类名。下面是classList的一些常用方法：

add：添加指定的类名
remove：移除指定的类名
toggle：如果存在（不存在）就删除（添加）一个类
contains：检查类名是否存在

下面是一个使用classList属性添加类名的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>JS Add Class Example</title>
  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>
  <p id="myParagraph">Hello World!</p>

  <button onclick="addClass()">Add Class</button>

  <script>
    function addClass() {
      var paragraph = document.getElementById("myParagraph");
      paragraph.classList.add("red");
    }
  </script>
</body>
</html>

上面的示例代码中，首先在页面中创建了一个段落元素，并设置其id为”myParagraph”。然后在脚本中定义了一个函数addClass()，该函数在按钮被点击时会将”red”类名添加到段落元素的类名列表中，从而改变了其文字颜色为红色。

运行结果

点击按钮后，段落文字颜色会变为红色。

2. 使用className属性

除了classList属性，我们还可以使用元素的className属性来添加类名。className属性是一个字符串，包含了元素的所有类名，通过修改className属性可以实现添加、移除或替换类名的功能。

下面是一个使用className属性添加类名的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>JS Add Class Example</title>
  <style>
    .blue {
      color: blue;
    }
  </style>
</head>
<body>
  <p id="myParagraph">Hello World!</p>

  <button onclick="addClass()">Add Class</button>

  <script>
    function addClass() {
      var paragraph = document.getElementById("myParagraph");
      paragraph.className += " blue";
    }
  </script>
</body>
</html>

上面的示例代码中，与前一个示例不同的是，这里使用的是元素的className属性来添加类名。在addClass()函数中，通过将” blue”字符串拼接到元素的原有类名上，实现了添加”blue”类名的效果。

运行结果

点击按钮后，段落文字颜色会变为蓝色。

3. 切换类名

在前面的示例中，我们演示了如何添加类名到元素中。有时候我们需要切换元素的类名，即在两个类名之间进行切换。这时可以使用classList的toggle方法或通过操作className来实现。

下面是一个使用classList的toggle方法切换类名的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>JS Toggle Class Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="myDiv">Click Me</div>

  <script>
    var div = document.getElementById("myDiv");

    div.addEventListener("click", function() {
      div.classList.toggle("highlight");
    });
  </script>
</body>
</html>

上面的示例代码中，页面中有一个div元素，点击该元素会切换”highlight”类名的状态。当div元素没有”highlight”类时，点击后会添加该类名；当div元素已经有”highlight”类时，点击后会移除该类名。