实现一个函数 addClass(element, className)，给 DOM 元素添加类名

推荐答案

// www.javascriptcn.com code example
function addClass(element, className) {
    if (element.classList) {
        element.classList.add(className);
    } else {
        const classes = element.className.split(' ');
        if (classes.indexOf(className) === -1) {
            classes.push(className);
            element.className = classes.join(' ');
        }
    }
}

本题详细解读

1. 函数功能

addClass 函数用于给指定的 DOM 元素添加一个类名。如果元素已经拥有该类名，则不进行任何操作。

2. 代码解析

• element.classList：现代浏览器支持 classList 属性，它提供了 add 方法，可以方便地添加类名。如果 element.classList 存在，则直接使用 add 方法添加类名。

• element.className：对于不支持 classList 的旧版浏览器，我们通过 element.className 来获取元素的类名字符串，然后将其拆分为数组。如果数组中不存在要添加的类名，则将其添加到数组中，最后将数组重新拼接为字符串并赋值给 element.className。

3. 兼容性考虑

• 该函数考虑了浏览器的兼容性，优先使用 classList，在不支持的情况下回退到 className 的方式。
• 使用 indexOf 来检查类名是否已经存在，避免重复添加。

4. 使用示例

const div = document.createElement('div');
addClass(div, 'my-class');
console.log(div.className); // 输出: "my-class"

5. 注意事项

• 如果传入的 className 包含空格，可能会导致意外的行为。因此，建议传入的类名是单一的、不包含空格的字符串。
• 该函数不会处理 className 为空字符串的情况，调用时需要确保传入的 className 是有效的类名。