操作自己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=)