现代浏览器提供了一个classList对象,以简化对元素的class属性的操作。较旧的浏览器需要直接操纵元素的className属性。
将类添加到元素的一种简单方法是将其附加到className属性的末尾。这不会防止重复的类名,并且在类名之间必须包含空格。
document.getElementById("link1").className += " foo";
document.getElementById("link2").className += " foo bar";对于多个元素,您需要在循环内添加类名称
var els = document.getElementsByClassName("foo"),
indx = els.length;
while (indx--) {
els[indx].className += " bar baz";
}可以将单个类名称添加为字符串。要添加多个类名,请使用ES6的传播运算符:
document.querySelector("#link1").classList.add("foo");
document.querySelector("#link2").classList.add(...['foo', 'bar']);对于多个元素,您需要在循环内添加类名称
document.querySelectorAll(".foo").forEach(el => {
el.classList.add(...['bar', 'baz']);
});