在javascritp中，我們可以通過style屬性可以控制元素的樣式，從而實現行為層通過DOM的style屬性去干預顯示層顯示的目標，但是這種方法是不好的，而且為了實現通過DOM腳本設置的樣式，你不得不花時間去研究javascrip函數，去尋找對應修改和設置樣式的有關語句。而且每次修改和添加JS腳本的工作量遠遠大於我們修改CSS屬性的量。
與其使用DOM修改元素樣式，不如使用函數去更新他的CLASS屬性來的實在一些。
ClassName屬性
一個簡單的無序列表，點擊button之前ul的樣式為uhh1
點擊button后，調用check函數中的className將ul的樣式由uhh1改為uhh2
<style type="text/css"> .uhh1{color:#CCCCCC;font-size:12px;} .uhh2{color:#FF6600;font-size:24px;} </style> <script> function check() { var uul = document.getElementsByTagName("ul")[0]; uul.className = "uhh2"; } </script> </head> <body> <ul class="uhh1"> <li><a href="#">首 頁</a></li> <li><a href="#">新聞快訊</a></li> <li><a href="#">產品信息</a></li> <li><a href="#">聯系我們</a></li> <br /> <button onclick="check()">click me</button> </ul> </body>
ClassName屬性可以獲取或寫入指定元素的Class屬性。
語法：
1 element.className
例
獲取一指定元素的class屬性，並寫入一個新值
HTML代碼：
<!DOCTYPE html>
<head>
</head>
<body>
<div id=“mochu” class="m">
........
</div>
</body>
</html>
javascript代碼
1 var element = document.getElementById("mochu"); 2 var classs = element.className;//獲取它的CLASS屬性 3 element.className = newclass;//替換一個新的CALSS屬性
例：
還有上面的HTML代碼，向元素內加入一個新的CLASS屬性
javascript代碼
var element = document.getElementById("mochu"); var classs = element.className;//獲取它的CLASS屬性 classs += '';//加入一個空格 classs += newclass;//加入一個新的class屬性 element.className = classs;//替換一個新的CALSS屬性
這里需要注意的時，className屬性，不能以新增加的方法寫入class屬性，必須獲取老屬性，然后合成字符串形式再寫入！