js 实现addclass

实现 addClass 方法

在 JavaScript 中，可以通过操作元素的 classList 属性来实现 addClass 功能。以下是几种常见的实现方式：

使用 classList.add

现代浏览器支持 classList API，可以方便地添加类名：

function addClass(element, className) {
  if (element && className) {
    element.classList.add(className);
  }
}

兼容旧浏览器的实现

对于不支持 classList 的旧浏览器，可以使用 className 属性：

function addClass(element, className) {
  if (!element || !className) return;

  if (element.classList) {
    element.classList.add(className);
  } else {
    var current = element.className;
    if (current.indexOf(className) === -1) {
      element.className = current ? current + ' ' + className : className;
    }
  }
}

jQuery 风格的实现

如果需要实现类似 jQuery 的链式调用：

function addClass(selector, className) {
  var elements = document.querySelectorAll(selector);
  elements.forEach(function(el) {
    el.classList.add(className);
  });
  return elements;
}

批量添加多个类名

支持同时添加多个类名的版本：

function addClass(element, classNames) {
  if (!element) return;

  var classes = classNames.split(' ');
  classes.forEach(function(className) {
    if (className) {
      element.classList.add(className);
    }
  });
}

注意事项

• 添加前最好检查类名是否已存在
• 考虑传入的参数有效性
• 现代项目建议直接使用 classList API
• 如果需要支持 IE8 等旧浏览器，需要使用 className 的 polyfill