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',...);