📌  相关文章
📜  JavaScript 为元素添加类名(1)

📅  最后修改于: 2023-12-03 15:01:40.743000             🧑  作者: Mango

JavaScript 为元素添加类名

在 Web 开发中，我们经常需要通过 JavaScript 动态地为元素添加类名。添加类名能够方便我们利用 CSS 实现更多样式和交互效果。

为元素添加类名的方法
1. classList 属性

classList 属性是 HTML5 中新增的属性，它返回一个元素的类名列表，可以通过该属性方便地为元素添加、删除、切换类名，示例代码如下：

const element = document.querySelector('#myElement');
element.classList.add('myClass'); // 添加类名
element.classList.remove('myClass'); // 删除类名
element.classList.toggle('myClass'); // 切换类名
2. className 属性

className 属性是元素对象所包含的 HTML 特性，可以通过该属性来操作元素的类名称。但是这种方式需要同时考虑到添加类名、删除类名、替换类名，代码较复杂，具体示例代码如下：

const element = document.querySelector('#myElement');
element.className += ' myClass'; // 添加类名
element.className = element.className.replace('myClass', ''); // 删除类名
element.className = element.className.replace('myClass', 'yourClass'); // 替换类名
示例代码

以下代码演示了如何使用 JavaScript 为元素添加类名：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript 为元素添加类名</title>
    <style>
      .myClass { color: red; }
    </style>
  </head>
  <body>
    <div id="myElement">Hello, world!</div>
    <button id="addButton">添加类名</button>
    <button id="removeButton">删除类名</button>
    <script>
      const element = document.querySelector('#myElement');
      const addButton = document.querySelector('#addButton');
      const removeButton = document.querySelector('#removeButton');
      addButton.addEventListener('click', () => {
        element.classList.add('myClass');
      });
      removeButton.addEventListener('click', () => {
        element.classList.remove('myClass');
      });
    </script>
  </body>
</html>
总结

添加类名是 Web 开发中重要的一环，学会使用 JavaScript 为元素添加类名可以实现更多的样式和交互效果。借助 HTML5 新增的 classList 属性，操作类名变得更加方便。