JS设置/修改DOM元素属性，以及className 和 classList的区别？

一、设置/修改元素常用属性:

最常见的属性比如：href、title、src等

语法： 对象.属性 = 值

二、设置/修改元素样式属性：

2.1、通过style属性操作CSS

语法：对象.style.样式属性 = 值

注意: 1、修改样式通过style属性引出

2、如果有属性有-连接符，需要转换为小驼峰命名法

3、赋值的时候，需要的时候不要忘记加css单位

2.2、操作类名(className) 操作CSS

引用场景: 修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

语法：元素.className = 'active'

注意:

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

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

好处：可以同时修改多个样式

坏处：直接使用className 赋值会覆盖以前的类名

2.3、通过 classList 操作类控制CSS

2.3.1、为什么使用classList？

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

语法: 追加一个类：元素.classList.add('类名')

如果同时增加多个样式，传递多个样式名称参数，以，分隔

删除一个类: 元素.classList.remove('类名')

如果同时移除多个样式，也是以，隔开

切换一个类：元素.classList.toggle('类名')

如果没有类名就添加，如果有就移除类名

注意——名称只能存在一个，不能同时多个存在

判断元素是否拥有某个类，如果有就返回true，没有就返回false：

元素.classList.contains('类名')

注意——如果参数里面同时有多个类名，不会报错。但是只会判断第一个类名，其他类名不会进行判断

2.3.2、使用 className 和 classList的区别？

1、修改大量的样式更方便——classList

2、修改不多样式的时候方便——className

3、classList 是追加和删除不影响以前类名