操作自己DOM元素的样式可以使用className和classList两种方式 进行操作。className返回的是一个此元素包含的样式类的字符串以空格符间隔，classList返回的是一个数组。这里我们主要讲解classList的使用。
classList包含5种方法：
add：添加类
contains：是否包含此类
remove:删除此类
replace：进行类的替换
toggle：交替使某个类存在或不存在
话不多说上例子
<code>
<title>设置元素的类/<title>
hahahahahah
/<code>
整个程序包含3个样式类red显示前景色为红色，blue显示前景色为蓝色，font设置字大小为19像素。
id为data的标签为控制样式的标签，id为info的标签为显示标签为data的标签的className值。
显示红字按钮为id为data的标签添加red样式，
显示为toggle字体大小的标签为id为data的标签交替变换是否有font样式
显示为将红字换为蓝字的按钮为id为data的标签中的red样式替换为blue样式
显示为清除蓝字的按钮为id删除data的标签中的blue样式
通过点击上述按钮可以展示不同的效果。
可以看出对一个DOM元素添加多个样式类时，如果样式类有重叠的属性，后面的样式类的属性将会覆盖前面样式类的属性。
当DOM元素具有blue样式同时具有red样式时再做将红字换为蓝字的操作时不会出现具有两个blue样式类,即不会出现设置重复的样式。
分享到:
閱讀更多 kuikui 的文章
