原生JS更改元素类名

今天来聊一聊关于原生JS是如何更改元素的类名，习惯了jQuery后，我们感觉更改元素的类名是一件非常容易的事情——addClass()、removeClass()和toggleClass()让我们轻松实现了对类名的修改。

那么原生的js是如何实现的呢？主要有三种方法setAttribute()、className和classList

setAttribute()

我们都知道，setAttribute()方法是创建或者改变元素的某个属性，那么我们就可以利用这个方法对元素的类名进行更改。具体方法是这样的el.setAttribute("class","classname")，

<div id="box"></div>
<script>
    document.getElementById("box").setAttribute('class','box')
    //<div id="box" class="box"></div>
</script>

需要注意的是，这个方法只兼容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可以兼容所有的浏览器，当然了，这个也是我们在jQuery出现之前最常用的一个方法了，具体的方法是这样的el.className="classname"

<div id="box"></div>
<script>
    document.getElementById("box").className="box"
    //<div id="box" class="box"></div>
</script>

上面介绍的两种方法有一个弊端，就是我们上述的方法会直接修改掉元素自带的类名，如果只是简单新增或删除类名的话，我们可以采用上述方法，可实际工作应用中，我们会发现上面的方面也非常的有限，显得很蹩脚，如果我们只想要添加或修改新的类名，那么就需要先获取元素原有类名，再通过其他方法进行修改，具体的方法我就不在此赘述了，那么原生的JS是怎么解决这个问题的呢？

classList

classList属性是只读的，不能通过直接赋值来进行修改元素的类名，但是可以通过add()、remove()和toggle()方法对classList进行修改。

具体使用方法如下

//el是对元素的对象引用
//添加一个或多个类名
el.classList.add("class1");
el.classList.add("class1","class2"...);

//删除一个或多个类名
el.classList.remove("class1");
el.classList.remove("class1","class2"...);

//切换元素类名
el.classList.toggle("classname")

//判断元素是否含有某个类名，如果有返回true，否则返回false
el.classList.contains("classname")