探讨在JavaScript中如何实现addClass()

立即学习“Java免费学习笔记（深入）”；

一个元素可以拥有多个类名，这些类名之间用空格分隔。例如：

This is a div element with class "my-class1" and "my-class2".

addClass 方法实现原理

在大多数 JavaScript 框架和库中，都提供了 addClass 这个方法来方便地操作元素的 class 属性。但是，实际上实现 addClass 并不难，下面我们将介绍一种常见的实现方法。

首先，我们需要获取要操作的目标元素，可以使用 querySelector 或 getElementById 等方法：

var elem = document.querySelector('.my-element');

接下来，我们需要将要添加的类名转换为一个数组形式，这样可以处理多个类名的情况。例如：

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

下载

var classesToAdd = ['class1', 'class2', 'class3'];

然后，我们需要获取目标元素当前的 class 属性值，并将其转换为数组形式：

var currentClasses = elem.className.split(' ');

接着，遍历要添加的类名数组，如果当前类名在目标元素的 class 属性中不存在，则将其添加到数组中：

for (var i = 0; i < classesToAdd.length; i++) {
  var className = classesToAdd[i];
  if (currentClasses.indexOf(className) === -1) {
    currentClasses.push(className);
  }
}

最后，将拼接好的 class 名称数组重新赋值给目标元素的 class 属性：

elem.className = currentClasses.join(' ');

完整的 addClass 函数实现如下：

function addClass(elem, classesToAdd) {
  // 将要添加的类名转换为数组形式
  if (!Array.isArray(classesToAdd)) {
    classesToAdd = [classesToAdd];
  }

  // 获取目标元素当前的 class 属性值，并将其转换为数组形式
  var currentClasses = elem.className.split(' ');

  // 遍历要添加的类名数组，如果当前类名在目标元素的 class 属性中不存在，则将其添加到数组中
  for (var i = 0; i < classesToAdd.length; i++) {
    var className = classesToAdd[i];
    if (currentClasses.indexOf(className) === -1) {
      currentClasses.push(className);
    }
  }

  // 将拼接好的 class 名称数组重新赋值给目标元素的 class 属性
  elem.className = currentClasses.join(' ');
}

使用 addClass 方法

使用 addClass 方法非常简单，只需要将要操作的元素和要添加的类名作为参数传递即可。例如，在点击按钮时添加类名 active：

Add class "active"

This is a div element.

总结

在本文中，我们介绍了一种基础的 addClass 方法实现方式，可以为任何 JavaScript 开发的应用程序提供添加元素类名的简便方法。需要注意在使用此方法的时候，应该将数组形式的类名传递给函数，并确保目标元素的 class 属性值符合预期。