原生js添加类名
动态添加class类名在前端开发过程中是很常见得做法，比如说在实现轮播图的时候给当前图片的锚点添加一个active类,有又或者在实现动画的时候添加一个终态css类。
当然，有很多js库中封装了添加类名的方法，典型的比如jquery中的addClass()方法。但是，在实际开发中，如果页面比较简单，逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能，这样能够有效的提升用户的体验效果。试想一下，如果你开发的一个页面总共也就几百行代码，用户每次使用的时候还要去加载几k甚至几十k的js库文件。对于用户而言，这个体验效果可想而知。
首先，我们了解下js有哪些可以设置class的方法。主要有三种,el.setAttribute('class','class1'),el.setAtrribute('className','class2')以及el.className='class3'.
.class1{
width:50px;
backgroud-color:red;
height:40px;
}
.class2{
width:100px;
height:200px;
background-color:#cccccc
}
.class3{
width:20px;
height:50px;
background-color:green;
}el.setAttribute('class','class1')
兼容性 ie7及ie7以下版本不支持
el.setAttribute('className', 'class2')
兼容性:恰好和el.setAttribute('class','class1')相反，不兼容ie7+ /Firefox/Safari/Chrome/Opera 兼容ie7及ie7以下版本
el.className='class3'
兼容性：所有浏览器都支持 ，有没有很兴奋，哈哈哈。终于找到你，还好我没放弃。
废话不多说，先来段代码
你以为这样就没了么，js其实还有别的方法可以添加class类名哦，下面我们就来看看。
Element.classList https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList
Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList集合。
add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
// div是具有class =“foo bar”的元素的对象引用
div.classList.add("anotherclass");
说到这里，就来多提一下Element.classList吧
它总共有五种方法add( String [, String] ) remove( String [,String] ) item ( Number ) toggle ( String [, force] ) contains( String )
remove( String [,String] )
删除指定的类值。
item ( Number )
按集合中的索引返回类值。
toggle ( String [, force] )
当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。
当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
contains( String )
检查元素的类属性中是否存在指定的类值。
// div是具有class =“foo bar”的元素的对象引用
div.classList.remove("foo");
div.classList.add("anotherclass");
// 如果visible被设置则删除它，否则添加它
div.classList.toggle("visible");
// 添加/删除 visible，取决于测试条件，i小于10
div.classList.toggle("visible", i < 10);
alert(div.classList.contains("foo"));
//添加或删除多个类
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");
备注：关于element.classList的介绍以及实例来自于MDN，链接我在上边已经给出，想要了解更多请查看MDN上的接口文档
今天就到这里吧，分享是一种快乐，学习是一种习惯。
关注博主公众号，获取更多前端干货！
