js 实现addclass

实现 addClass 方法

在 JavaScript 中，可以通过操作元素的 classList 属性来动态添加类名。classList 提供了 add 方法，可以方便地添加一个或多个类名。

function addClass(element, className) {
  if (element.classList) {
    element.classList.add(className);
  } else {
    element.className += ' ' + className;
  }
}

兼容性处理

对于不支持 classList 的老旧浏览器，可以使用字符串拼接的方式实现类似功能：

function addClass(element, className) {
  var currentClass = element.className;
  if (currentClass.indexOf(className) === -1) {
    element.className = currentClass ? currentClass + ' ' + className : className;
  }
}

批量添加多个类名

如果需要一次性添加多个类名，可以扩展上述方法：

function addClasses(element, classNames) {
  classNames.forEach(function(className) {
    addClass(element, className);
  });
}

使用示例

var div = document.getElementById('myDiv');
addClass(div, 'active');  // 添加单个类
addClasses(div, ['active', 'highlight']);  // 添加多个类

注意事项

• 添加前应检查类名是否已存在，避免重复添加
• 类名之间需要用空格分隔
• 对于 SVG 元素，在某些旧版本浏览器中可能需要特殊处理

替代方案

现代 JavaScript 项目中，可以直接使用 classList API：

document.getElementById('myElement').classList.add('new-class');

或者使用 jQuery 的 addClass 方法：

$('#myElement').addClass('new-class');