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

<div class="my-class">This is a div element with class "my-class".</div>

<div class="my-class1 my-class2">This is a div element with class "my-class1" and "my-class2".</div>

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

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

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

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

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

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(' ');
}

<button onclick="addClass(document.querySelector('.my-element'), 'active')">Add class "active"</button>

<div class="my-element">This is a div element.</div>