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

点击链接加入群【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. var li = document.getElementsByTagName("li");  //获取页面所有li节点
7. for(var i=0;i<li.length;i++)                                     //循环li节点
8. {
9. li[i].onclick=function(){                                         //为循环的li节点绑定 onclick事件
10. for(var j=0;j<li.length;j++)
11. {
12. li[j].style.backgroundColor="#FFF";                  //将所有li背景颜色修改
13. this.style.backgroundColor="#C0F";                //将当前点击的li背景颜色修改
14. }
15. }
16. }
17. }
18. }
19. </script>
20. <ul>
21. <li>測試1</li>
22. <li>測試2</li>
23. <li>測試3</li>
24. <li>測試4</li>
25. <li>測試5</li>
26. <li>測試6</li>
27. </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. li[i].onmousemove=function(){      //为循环的li节点绑定onmousemove事件也就是鼠标移上事件
17. for(var j=0;j<li.length;j++)
18. {
19. if(this.style.backgroundColor != "red")  //这里就判断改li标签是否被点击 如果点击就不改变颜色
20. {
21. this.style.backgroundColor="#C0F";
22. }
23. }
24. }
25. li[i].onmouseout=function(){       ///为循环的li节点绑定onmouseout事件也就是鼠标移走事件
26. for(var j=0;j<li.length;j++)
27. {
28. if(this.style.backgroundColor != "red")       //这里就判断改li标签是否被点击 如果点击就不改变颜色
29. {
30. this.style.backgroundColor="#FFF";
31. }
32. }
33. }
34. }
35. }
36. }
37. </script>
38. <ul>
39. <li>測試1</li>
40. <li>測試2</li>
41. <li>測試3</li>
42. <li>測試4</li>
43. <li>測試5</li>
44. <li>測試6</li>
45. </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. .c1{border:1px solid blue;}
5. .c2{border:1px solid #ff0000;}
6. </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