如何给指定元素添加类名

技术背景

在前端开发中，经常需要动态地给 HTML 元素添加或移除类名，以此来改变元素的样式或实现特定的交互效果。不同的浏览器对类名操作的支持有所不同，因此需要掌握多种方法来确保代码的兼容性和性能。

实现步骤

现代浏览器（支持 classList）

对于现代浏览器，可以使用 element.classList.add 方法来添加类名，使用 element.classList.remove 方法来移除类名。

// 添加类名
element.classList.add("my-class");

// 移除类名
element.classList.remove("my-class");

支持旧版本浏览器（如 IE 9 及以下）

对于不支持 classList 的旧版本浏览器，可以通过操作 className 属性来添加类名。需要注意在添加新类名时，要在前面加上一个空格，避免影响已有的类名。

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

var d = document.getElementById("div1");
d.className += " otherclass";

使用 jQuery

如果项目中使用了 jQuery，可以使用 addClass 和 removeClass 方法来添加和移除类名。

// 添加类名
$(document).ready( function() {
    $('#div1').addClass('some_other_class');
});

// 移除类名
var a = document.body, c = ' classname';
$(a).removeClass(c);

核心代码

纯 JavaScript 方法

// 添加类名
function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

// 检查元素是否有指定类名
function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

// 使用示例
var element = document.getElementById('someElem');
addClass(element, 'someClass');

支持 classList 的跨浏览器方法

const oldAdd = (element, className) => {
    let classes = element.className.split(' ');
    if (classes.indexOf(className) < 0) {
        classes.push(className);
    }
    element.className = classes.join(' ');
};

const oldRemove = (element, className) => {
    let classes = element.className.split(' ');
    const idx = classes.indexOf(className);
    if (idx > -1) {
        classes.splice(idx, 1);
    }
    element.className = classes.join(' ');
};

const addClass = (element, className) => {
    if (element.classList) {
        element.classList.add(className);
    } else {
        oldAdd(element, className);
    }
};

const removeClass = (element, className) => {
    if (element.classList) {
        element.classList.remove(className);
    } else {
        oldRemove(element, className);
    }
};

// 使用示例
var element = document.getElementById('someElem');
addClass(element, 'someClass');
removeClass(element, 'someClass');

最佳实践

• 性能优先：如果只关注现代浏览器的支持，优先使用 element.classList.add 和 element.classList.remove 方法，它们的性能更高。
• 兼容性优先：如果需要支持旧版本浏览器，使用操作 className 属性的方法，并确保在添加新类名时加上空格。
• 使用框架：如果项目中已经使用了 jQuery 等框架，可以使用框架提供的方法，代码更简洁，但可能会增加项目的体积。

常见问题

getElementsByClassName 返回的是 HTML 集合，不是数组

当使用 getElementsByClassName 方法获取元素并使用 forEach 循环添加类名时，会出现问题，因为 getElementsByClassName 返回的是 HTML 集合，不是数组。可以将其转换为数组后再进行操作。

[...document.getElementsByClassName("class-name")].forEach(element => element.classList.add("new-class"));

重复添加类名

在操作 className 属性时，如果不进行检查，可能会重复添加相同的类名。可以使用函数来检查元素是否已经有指定的类名，避免重复添加。

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}