簡介

一個很方便的用來在JS中控制元素類的方法，完全可以取代jQuery中對class的操作

classList屬性返回元素的類名，作為DOMTokenList物件。該屬性用於在元素中新增，移除及切換 CSS 類。

classList屬性是隻讀的，但你可以使用add()和remove()方法修改它。

相容性：

方法

• add(class1, class2, ...)：在元素中新增一個或多個類名。如果指定的類名已存在，則不會新增
• contains(class)：返回布林值，判斷指定的類名是否存在。
• item(index)：返回類名在元素中的索引值。索引值從0
  開始。如果索引值在區間範圍外則返回null
• remove(class1, class2, ...)：移除元素中一個或多個類名。注意：移除不存在的類名，不會報錯。
• toggle(class, true|false)：在元素中切換類名。
  • 第一個引數為要在元素中移除的類名，並返回false。如果該類名不存在則會在元素中新增類名，並返回true。
  • 第二個是可選引數，是個布林值用於設定元素是否強制新增或移除類，不管該類名是否存在。例如：移除一個class: element.classList.toggle("classToRemove", false); 新增一個class: element.classList.toggle("classToAdd", true)
    ;

例子

const classList = document.getElementById("myDIV").classList

// 新增多個類
classList.add("mystyle", "anotherClass", "thirdClass");

// 移除多個類:
classList.remove("mystyle");

// 切換類
classList.toggle("newClassName");

// 有多少個類名
classList.length;

// 是否存在 "mystyle" 類
classList.contains("mystyle");

參考

• 菜鳥教程 - HTML DOM classList 屬性