点击链接加入群【JavaEE(SSH+IntelliJIDE+Maven)】：http://jq.qq.com/?_wv=1027&k=L2rbHv

一、js和css控制鼠标略过和点击后的样式

[html] view plaincopy

1. <script language="javascript">  

2. document.onreadystatechange=function()     //当页面状态改变时执行函数  

3. {  

4. if(document.readyState == "complete")         //当页面加载状态为完成时执行条件内容  

5.   

6. {   

7.   var li = document.getElementsByTagName("li");  //获取页面所有li节点  

8.   for(var i=0;i<li.length;i++)                                     //循环li节点  

9.   {  

10.    li[i].onclick=function(){                                         //为循环的li节点绑定 onclick事件  

11.     for(var j=0;j<li.length;j++)  

12.     {  

13.      li[j].style.backgroundColor="#FFF";                  //将所有li背景颜色修改  

14.      this.style.backgroundColor="#C0F";                //将当前点击的li背景颜色修改  

15.     }  

16.    }  

17.   }  

18. }  

19. }  

20. </script>  

21. <ul>  

22. <li>測試1</li>  

23. <li>測試2</li>  

24.   

25. <li>測試3</li>  

26. <li>測試4</li>  

27.   

28. <li>測試5</li>  

29. <li>測試6</li>  

30. </ul>  

刚没注意你还要滑过的效果  以下是全部效果 其实思路都是一样 只是绑定的事件不一样而已

////////////////////////////////////////////////////////////////////////////////////

[html] view plaincopy

1. <script language="javascript">  

2. document.onreadystatechange=function()  //当页面状态改变时执行函数  

3. {  

4. if(document.readyState == "complete") //当页面加载状态为完全结束时进入   

5. {   

6.   var li = document.getElementsByTagName("li");  

7.   for(var i=0;i<li.length;i++)  

8.   {  

9.    li[i].onclick=function(){                        //为循环的li节点绑定 onclick事件 也就是点击事件  

10.     for(var j=0;j<li.length;j++)  

11.     {  

12.      li[j].style.backgroundColor="#FFF";      

13.      this.style.backgroundColor="red";  

14.     }  

15.    }  

16.      

17.    li[i].onmousemove=function(){      //为循环的li节点绑定onmousemove事件也就是鼠标移上事件  

18.     for(var j=0;j<li.length;j++)  

19.     {  

20.      if(this.style.backgroundColor != "red")  //这里就判断改li标签是否被点击 如果点击就不改变颜色  

21.      {        

22.       this.style.backgroundColor="#C0F";   

23.      }  

24.     }  

25.    }  

26.      

27.    li[i].onmouseout=function(){       ///为循环的li节点绑定onmouseout事件也就是鼠标移走事件  

28.     for(var j=0;j<li.length;j++)  

29.     {  

30.      if(this.style.backgroundColor != "red")       //这里就判断改li标签是否被点击 如果点击就不改变颜色  

31.      {   

32.       this.style.backgroundColor="#FFF";  

33.      }  

34.     }  

35.    }  

36.   }  

37. }  

38. }  

39. </script>  

40. <ul>  

41. <li>測試1</li>  

42. <li>測試2</li>  

43.   

44. <li>測試3</li>  

45. <li>測試4</li>  

46.   

47. <li>測試5</li>  

48. <li>測試6</li>  

49. </ul>  

二、js改变div的样式,getElementById()语法实例

今天为大家讲解：js改变div的样式,getElementById()语法实例!

样式表设置如下：

[css] view plaincopy

1. <style>  

2. body{font-size:12px; padding-top:32px;}  

3. div{width:600px; text-align:center; margin:0px auto; height:42px;}  

4.   

5. .c1{border:1px solid blue;}  

6. .c2{border:1px solid #ff0000;}  

7. </style>  

js代码如下：

[html] view plaincopy

1. <script>  

2. function get1()  

3. {  

4.  document.getElementById("div1").className="div c1";  

5. }  

6. function get2()  

7. {  

8.  document.getElementById("div1").className="div c2";  

9. }  

10. </script>  

网页内容如下：

[html] view plaincopy

1. <div id="div1">  

2. </div>  

3. <br />  

4. <div>  

5.     <input type="button" value="边框蓝色" onclick="get1()" />    

6.     <input type="button" name="button" id="button" value="边框红色" onclick="get2()" />  

7. </div>  

主要通过 getElementById()改变Div的样式属性，从代码中已经很直观表现出来了。
点击按钮 边框蓝色，调用 Get1()函数，改变Div1的样式属于为“div c1”，这样子就可以实现通过Js改变Div的颜色，
同样原理可以应用到其它属性上。

点击查看效果展示

参考:  http://www.myexception.cn/HTML-CSS/855448.html

http://www.mayixueyuan.com/UploadFile/file/js_all/20110714_js_div_class/20110709_js_div_class.html

js和css控制鼠标略过和点击后的样式