javaScript 添加和移除class類名的幾種方法

添加類屬性：

// 一次只能設置一個類值，如果當前屬性本身存在類值，會被替換
element.className = '類名';

/*
 * .setAttribute 用來設置自定義屬性和值的
 * 自定義屬性：原本標簽中沒有這個屬性，為了存儲數據，方便操作自己設置添加的。
 * 自定義屬性無法直接通過DOM對象的方式獲取或設置
 * 可以通過 .getAttribute 方法獲取
 * 因為"class"是系統自有的屬性，所以直接傳入"class"后也可以生效
*/ 
element.setAttribute('屬性名','值');


// .classList 是一個只讀屬性，會以字符串數組的形式返回這個元素的所有類名(類列表)
// 如果類屬性沒有設置或者為空，會返回 0
// 雖然是只讀屬性，但是可以配合使用 add(), remove() 和 toggle() 方法修改它
// add() 往類屬性內添加類值，可以一次添加多個類值，如果當前類屬性存在多個類值，該方法也可以添加，不會清除替換原有的類值
// remove() 移除類列表內的類值，可以一次移除多個
// toggle() 判斷元素類列表內有沒有某個類名，有則移除，沒有則添加（切換效果），同樣，如果類屬性存在多個類值，添加時不會清除替換原有的類值
element.classList.add('類名');

移除類屬性：

// 把元素的類屬性值替換成空 ""，清空的是類值，class屬性還在
element.className = "";

// 移除指定的自定義或系統的屬性和其值，整個移除，去污不殘留
element.removeAttribute('類名');

// 移除類列表內指定的類值，可以一次移除多個,移除的是類值，class屬性還在
element.classList.remove('類名1','類名2',...);