js 实现addclass

使用 classList 添加类名

现代浏览器支持通过 classList API 操作元素的类名，这是最简洁高效的方式。

// 获取元素
const element = document.getElementById('myElement');

// 添加单个类
element.classList.add('newClass');

// 添加多个类
element.classList.add('class1', 'class2');

classList.add() 会自动处理重复类名，不会重复添加相同的类。

通过 className 属性添加类

传统方法通过操作 className 属性实现，适用于所有浏览器但需要手动处理字符串。

const element = document.getElementById('myElement');

// 添加单个类
element.className += ' newClass';

// 更安全的添加方式
if (!element.className.includes('newClass')) {
    element.className = element.className + ' newClass';
}

注意需要包含前导空格，并建议先检查是否已存在该类名。

封装通用 addClass 函数

可以封装一个兼容性更好的工具函数：

function addClass(element, className) {
    if (element.classList) {
        element.classList.add(className);
    } else {
        const current = element.className;
        if (!current.includes(className)) {
            element.className = current + (current ? ' ' : '') + className;
        }
    }
}

// 使用示例
const div = document.querySelector('div');
addClass(div, 'active');

这个函数会优先使用 classList，在不支持的浏览器中回退到 className 方式。

使用 jQuery 添加类

如果项目中已使用 jQuery，可以直接使用其提供的方法：

// 添加单个类
$('#myElement').addClass('newClass');

// 添加多个类
$('#myElement').addClass('class1 class2');

jQuery 的方法内部已经处理了各种边界情况和浏览器兼容性问题。