添加一个类

现代浏览器提供了一个 classList 对象，以便于操作元素的 class 属性。较旧的浏览器需要直接操作元素的 className 属性。

W3C DOM < 4

向元素添加类的简单方法是将其附加到 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";
}

W3C DOM >= 4

可以将单个类名添加为字符串。要添加多个类名，请使用 ES6 的扩展运算符：

document.querySelector("#link1").classList.add("foo");
document.querySelector("#link2").classList.add(...['foo', 'bar']);

对于多个元素，你需要在循环内添加类名

document.querySelectorAll(".foo").forEach(el => {
  el.classList.add(...['bar', 'baz']);
});