classList与className 区别

js可以通过 className 属性动态获取或者设置元素的 class 属性值。由于class是js中的关键字。

所以没有使用class作为dom对象属性，而是使用className替代。HTML5新增classList属性，同样可以操作元素class属性。

 className设置、修改元素样式属性
在之前我们修改样式属性是直接使用style属性来修改，如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式，可以同时修改多个样式。

注意：

 

1、由于class是关键字，所以使用className去代替

2、className是使用新值换旧值，如果需要添加一个类，就需要保留之前的类名

3、可以同时指定多个样式类名，以空格分隔，空格的数量>=1

4、className的缺点：会覆盖元素之前的样式，所以在以后使用插件或者框架的时候，我们往往并不是很方便的知道当前元素之前加了什么样式，意味着我们在使用calssName的时候，风险很大，如果你能确定元素就是一个样式，那么就可以使用className。

具体使用：

classList设置、修改元素样式属性

为了解决className容易覆盖以前的类名，我们可以通过classList的方式追加和删除类名

 

注意：

1、classList不会修改元素之前所用的样式

2、同时增加多个样式，传递多个样式名称参数，以“ ，”分隔

3、toggle方法：如果有样式就是移除，没有就是添加，而且只能切换一个

**其他方法的具体使用**

此外，如果想利用classList返回的集合对象，只需要一个contains方法即可。contains:判断元素是否拥有某个名称的样式，如果有返回true,如果没有返回false

相信看了上述介绍，会对两个属性的区别有了比较详细的了解。