Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。
1、用className 属性修改节点的css类别
代码如下：
1 <html> 2 <head> 3 <title>追加CSS类别</title> 4 <style type="text/css"> 5 .myUL1{ 6 color:#0000FF; 7 font-family:Arial; 8 font-weight:bold; 9 } 10 .myUL2{ 11 text-decoration:underline; 12 } 13 </style> 14 <script language="javascript"> 15 function check(){ 16 var oMy = document.getElementsByTagName("ul")[0]; 17 oMy.className = " myUL2"; //修改CSS类 18 } 19 </script> 20 </head> 21 <body> 22 <ul onclick="check()" class="myUL1"> 23 <li>HTML</li> 24 <li>JavaScript</li> 25 <li>CSS</li> 26 </ul> 27 </body> 28 </html>
运行结果：
点击之后为 
2、追加css类别
1 <html> 2 <head> 3 <title>追加CSS类别</title> 4 <style type="text/css"> 5 .myUL1{ 6 color:#0000FF; 7 font-family:Arial; 8 font-weight:bold; 9 } 10 .myUL2{ 11 text-decoration:underline; 12 } 13 </style> 14 <script language="javascript"> 15 function check(){ 16 var oMy = document.getElementsByTagName("ul")[0]; 17 oMy.className += " myUL2"; //追加CSS类,注意" myUL2"前面的空格. 18 } 19 </script> 20 </head> 21 <body> 22 <ul onclick="check()" class="myUL1"> 23 <li>HTML</li> 24 <li>JavaScript</li> 25 <li>CSS</li> 26 </ul> 27 </body> 28 </html>
运行时，单击列表后，实际上<ul> 的class 属性变为：
<ul onclick="check()" class="myUL1 myUL2">
所以添加css类别的时候类名之前一定要添加空格，才可以实现属性追加。重要的事情说三遍，加空格！加空格！！加空格！！！
运行结果如下：
点击之后为 