js实现addclassname

使用 classList.add 方法

通过元素的 classList 属性可以方便地添加类名。classList.add 方法支持单个或多个类名的添加，且会自动处理重复类名。

const element = document.getElementById('example');
element.classList.add('new-class');

添加多个类名时，只需传入多个参数：

element.classList.add('class-one', 'class-two');

直接操作 className 属性

若需兼容旧环境或直接操作字符串形式的类名，可以通过 className 属性实现。注意需手动处理空格和重复类名。

const element = document.getElementById('example');
element.className += ' new-class';

更安全的方式是先检查类名是否存在：

if (!element.className.includes('new-class')) {
  element.className += ' new-class';
}

封装通用函数

以下函数支持动态添加类名，并自动处理重复和空格问题：

function addClassName(element, className) {
  if (element.classList) {
    element.classList.add(className);
  } else {
    const classes = element.className.split(' ');
    if (classes.indexOf(className) === -1) {
      element.className += ' ' + className;
    }
  }
}

// 使用示例
addClassName(document.getElementById('example'), 'active');

兼容性说明

• classList 兼容现代浏览器及IE10+。
• 直接操作 className 的方式在所有浏览器中均可用，但需注意字符串拼接时的空格处理。
• 封装函数时推荐优先使用 classList，并回退到 className 方案以增强兼容性。