隔行变色的几种方式

huanying2015 2017-12-10 原文

隔行变色有很多种实现方法，自己也整理了一下，归纳三种，分享出来，仅供参考

1. html 如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style>
 7 
 8     div{
 9       height:30px;
10       border:1px solid gray;
11     }
12   </style>
13 </head>
14 <body>
15   <div></div>
16   <div></div>
17   <div></div>
18   <div></div>
19   <div></div>
20   <div></div>
21   <div></div>
22   <div></div>
23   <div></div>
24   <div></div>
25   <div></div>
26   <div></div>
27   <div></div>
28   <div></div>
29   <div></div>
30   <div></div>
31   <div></div>
32   <div></div>
33   <div></div>
34   <div></div>
35   <div></div>
36   <div></div>
37   <div></div>
38 </body>
39 </html>

View Code

1.1 第一种实现方法：流程式的

 1 window.onload=function(){
 2      var adiv = document.querySelectorAll('div');
 3      for(var i=0;i<adiv.length;i++){
 4        if(i%2==0){
 5          adiv[i].style.background = 'green';
 6        }else{
 7           adiv[i].style.background = 'blue';
 8        }
 9      };
10      var oldcolor = null;
11      for(var i=0;i<adiv.length;i++){
12        adiv[i].onmouseover = function(){
13          oldcolor = this.style.background;
14          this.style.background = 'gray';
15        };
16         adiv[i].onmouseout = function(){
17          this.style.background = oldcolor;
18        };
19      };
20   }

1.2 第二种实现方法：面向对象式的

 1 window.onload=function(){
 2      var obj = {
 3         adiv :[],
 4         setdiv : function(){
 5              this.adiv = document.querySelectorAll('div');
 6         },
 7         init : function(){
 8             this.setdiv();
 9             for(var i=0;i<this.adiv.length;i++){
10               if(i%2==0){
11                 this.adiv[i].style.background = 'green';
12               }else{
13                   this.adiv[i].style.background = 'blue';
14               }
15             };
16         },
17         toogle:function(){
18            var oldcolor = null;
19            var that = this;
20            for(var i=0;i<that.adiv.length;i++){
21               that.adiv[i].onmouseover = function(){
22                 oldcolor = this.style.background;
23                 this.style.background = 'gray';
24               };
25               that.adiv[i].onmouseout = function(){
26                  this.style.background = oldcolor;
27               };
28           };
29         }
30     };
31     obj.init();
32     obj.toogle();
33   }

1.3 第三种实现方法：面向对象的原型对象式的

 1     window.onload = function(){
 2       
 3       function OTdiv(){
 4           this.adiv = document.querySelectorAll('div');
 5       };
 6       OTdiv.prototype.init = function(){
 7           for(var i=0;i<this.adiv.length;i++){
 8               if(i%2==0){
 9                 this.adiv[i].style.background = 'green';
10               }else{
11                   this.adiv[i].style.background = 'blue';
12               }
13             };
14       };
15       OTdiv.prototype.toogle = function(){
16            var oldcolor = null;
17            var that = this;
18            for(var i=0;i<that.adiv.length;i++){
19               that.adiv[i].onmouseover = function(){
20                 oldcolor = this.style.background;
21                 this.style.background = 'gray';
22               };
23               that.adiv[i].onmouseout = function(){
24                  this.style.background = oldcolor;
25               };
26           };
27       };
28       var odiv = new OTdiv();
29       odiv.init();
30       odiv.toogle();
31     };