今天在做按鈕時，需要給按鈕做一個按下去的效果叔收，想著用增加一個class替換背景顏色的方法去做齿穗，但是才發(fā)現(xiàn)不知道在原生JS中，如何用類似的方法像JQuery里面一樣饺律，直接用addClass和removeClass直接操作DOM的類窃页。
百度了一下才發(fā)現(xiàn)原來用classList屬性可以很方便地對class進行操作
例子：
document.getElementById("vipemail").classList.add("btn-active");
這段的含義就是將“btn-active”這個類添加到ID為vipemail的標簽中
同理
document.getElementById("vipemail").classList.remove("btn-active");
意思就是去掉ID為vipemail的標簽中的“btn-active”類
當然，classList不僅僅只有這兩種用法复濒，下面順帶介紹一下classList的常用方法
classList
-
語法
element.classList-
屬性
-
length(作用：顯示元素中有多少個類名)
例如：
<div id="myDIV" class="a b c"></div>
則
document.getElementById("myDIV").classList.length;
輸出的結果是3脖卖。
-
方法
-
classList（作用：輸出元素的類名列表）
例子：
<div id="myDIV" class="a b c"></div>
var x = document.getElementById("myDIV").classList;
x的輸出結果為：a b c
-
add(class1,class2)（作用：在元素中添加一個或多個類名）
注意：如果指定的類名已經(jīng)存在，則不會添加
例子：
document.getElementById("myDIV").classList.add("btn-active");
-
contains(class)（作用：判斷指定的類名是否存在巧颈，返回布爾值）
例子：
<div id = "myDIV" class = "btn-active">
則
document.getElementById("myDIV").classList.contains("btn-active")
返回的結果為true
document.getElementById("myDIV").classList.contains("btn")
返回的結果為false
-
item(index)（作用：返回類名在元素中的索引值畦木。索引值從0開始）
例子：
<div id="myDIV" class="a b c"></div>
document.getElementById("myDIV").classList.item(0)
返回的結果是a
-
remove（作用：移除元素中一個或多個類名）
注意：若移除不存在的類名，不會報錯
例子：
document.getElementById("myDIV").classList.remove("btn-active");
最后附上classList的參考教程
classList | 菜鳥教程
