新增一個類

現代瀏覽器提供了一個 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']);
});