您的位置: 首页  >  IT文章  >  js跟css控制鼠标略过和点击后的样式

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

分类: IT文章 • 2023-12-19 22:27:13
js和css控制鼠标略过和点击后的样式

源：http://blog.csdn.net/xn4545945/article/details/8498272

评：

一、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..net/HTML-CSS/855448.html

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

相关推荐