操作自己DOM元素的样式可以使用className和classList两种方式 进行操作。className返回的是一个此元素包含的样式类的字符串以空格符间隔，classList返回的是一个数组。这里我们主要讲解classList的使用。
classList包含5种方法：
add：添加类
contains：是否包含此类
remove:删除此类
replace：进行类的替换
toggle：交替使某个类存在或不存在
话不多说上例子
<!DOCTYPE html>
<html>
<head>
<title>设置元素的类</title>
<meta charset="utf-8">
<style>
.blue{
color: blue;
}
.red{
color: red;
}
.font{
font-size: 19px;
}
</style>
</head>
<body>
<div>
<p id="data">hahahahahah</p>
<p id="info"></p>
<div>
<input type="button" value="显示红字" onclick="red()">
<input type="button" value="toggle字体大小" onclick="fontsize()">
<input type="button" value="将红字换为蓝字" onclick="replace()">
<input type="button" value="清除蓝字"onclick="remove()">
</div>
</div>
<script>
var dim = document.getElementById("data").classList;
var info=document.getElementById("info");
function red()
{
if(!dim.contains("red"))
{
dim.add("red");
}
display();
}
function fontsize()
{
dim.toggle("font");
display();
}
function replace()
{
dim.replace("red","blue");
display();
}
function remove()
{
dim.remove("blue");
display();
}
function display()
{
info.innerHTML=document.getElementById("data").className;
}
display();
</script>
</body>
</html>
整个程序包含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样式类,即不会出现设置重复的样式。
![怎样使用SpringMVC控制页面[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)