今天來聊一聊關(guān)于原生JS是如何更改元素的類名，習(xí)慣了jQuery后诗赌，我們感覺更改元素的類名是一件非常容易的事情——addClass()汗茄、removeClass()和toggleClass()讓我們輕松實(shí)現(xiàn)了對(duì)類名的修改。
那么原生的js是如何實(shí)現(xiàn)的呢铭若？主要有三種方法setAttribute()洪碳、className和classList
setAttribute()
我們都知道，setAttribute()方法是創(chuàng)建或者改變?cè)氐哪硞€(gè)屬性叼屠，那么我們就可以利用這個(gè)方法對(duì)元素的類名進(jìn)行更改瞳腌。具體方法是這樣的el.setAttribute("class","classname")，
<div id="box"></div>
<script>
document.getElementById("box").setAttribute('class','box')
//<div id="box" class="box"></div>
</script>
需要注意的是镜雨，這個(gè)方法只兼容IE8+及其他瀏覽器嫂侍，那IE7及以下的需要怎么處理呢？
方法還是通過setAttribute()荚坞，只不過屬性名需改為“className”挑宠，具體的方法是這樣的el.setAttribute("className","classname")
<div id="box"></div>
<script>
document.getElementById("box").setAttribute('className','box')
//<div id="box" class="box"></div>
</script>
看完上面的是不是都想放棄了，那沒有兼容所有瀏覽器的呢颓影？
className
className可以兼容所有的瀏覽器各淀，當(dāng)然了，這個(gè)也是我們?cè)趈Query出現(xiàn)之前最常用的一個(gè)方法了诡挂，具體的方法是這樣的el.className="classname"
<div id="box"></div>
<script>
document.getElementById("box").className="box"
//<div id="box" class="box"></div>
</script>
上面介紹的兩種方法有一個(gè)弊端碎浇，就是我們上述的方法會(huì)直接修改掉元素自帶的類名，如果只是簡(jiǎn)單新增或刪除類名的話璃俗，我們可以采用上述方法奴璃，可實(shí)際工作應(yīng)用中，我們會(huì)發(fā)現(xiàn)上面的方面也非常的有限旧找，顯得很蹩腳溺健，如果我們只想要添加或修改新的類名，那么就需要先獲取元素原有類名，再通過其他方法進(jìn)行修改鞭缭，具體的方法我就不在此贅述了剖膳，那么原生的JS是怎么解決這個(gè)問題的呢？
classList
classList屬性是只讀的岭辣，不能通過直接賦值來進(jìn)行修改元素的類名吱晒，但是可以通過add()、remove()和toggle()方法對(duì)classList進(jìn)行修改沦童。
具體使用方法如下
//el是對(duì)元素的對(duì)象引用
//添加一個(gè)或多個(gè)類名
el.classList.add("class1");
el.classList.add("class1","class2"...);
//刪除一個(gè)或多個(gè)類名
el.classList.remove("class1");
el.classList.remove("class1","class2"...);
//切換元素類名
el.classList.toggle("classname")
//判斷元素是否含有某個(gè)類名仑濒，如果有返回true，否則返回false
el.classList.contains("classname")
