隔行变色效果

最新推荐文章于 2021-06-04 12:32:01 发布

翻译最新推荐文章于 2021-06-04 12:32:01 发布 · 360 阅读

前端js 专栏收录该内容

39 篇文章

订阅专栏

隔行变色效果在众多网站有应用，在列表条数比较多的情况下特别有效，提高了行与行之间的辨识度。纯CSS实现隔行变色当前存在一定浏览器兼容性问题，使用JavaScript实现更为稳妥。

CSS实现可以参阅CSS表格隔行变色详解一章节。

代码实例如下:

     
      
       
        
            
             01
            
            
             02
            
            
             03
            
            
             04
            
            
             05
            
            
             06
            
            
             07
            
            
             08
            
            
             09
            
            
             10
            
            
             11
            
            
             12
            
            
             13
            
            
             14
            
            
             15
            
            
             16
            
            
             17
            
            
             18
            
            
             19
            
            
             20
            
            
             21
            
            
             22
            
            
             23
            
            
             24
            
            
             25
            
            
             26
            
            
             27
            
            
             28
            
            
             29
            
            
             30
            
            
             31
            
            
             32
            
            
             33
            
            
             34
            
            
             35
            
            
             36
            
            
             37
            
            
             38
            
            
             39
            
            
             40
            
            
             41
            
            
             42
            
            
             
              <!DOCTYPE html>
             
             
              <
              html
              >
             
             
              <
              head
              >
             
             
              <
              meta 
              charset
              =
              " utf-8"
              >
             
             
              <
              title
              >隔行变色</
              title
              >
             
             
              <
              style 
              type
              =
              "text/css"
              >
             
             
              div {
             
             
                
              width:400px;
             
             
                
              height:300px;
             
             
              }
             
             
              ul{list-style:none;}
             
             
              ul li {
             
             
                
              height:25px;
             
             
                
              line-height:25px;
             
             
                
              font-size:12px;
             
             
              }
             
             
              </
              style
              >
             
             
              <
              script 
              type
              =
              "text/javascript"
              > 
             
             
              window.onload=function(){ 
             
             
                
              var mylist=document.getElementById("list").getElementsByTagName("li"); 
             
             
                
              var listlen=mylist.length; 
             
             
                
              for(var i=0;i<
              listlen
              ;i++) { 
             
             
                  
              if(i%2==0) { 
             
             
                    
              mylist[i]
              .style.backgroundColor
              =
              "#639"
              ; 
             
             
                  
              } 
             
             
                
              }     
             
             
              } 
             
             
              </script>
             
             
              </
              head
              >
             
             
              <
              body
              >
             
             
              <
              div
              >
             
             
                
              <
              ul 
              id
              =
              "list"
              >
             
             
                  
              <
              li
              >大家好，欢迎来到蚂蚁部落</
              li
              >
             
             
                  
              <
              li
              >div+css教程</
              li
              >
             
             
                  
              <
              li
              >希望明天会更好，因为我们奋斗了</
              li
              >
             
             
                  
              <
              li
              >春天是生机勃勃的，一切充满希望。</
              li
              >
             
             
                  
              <
              li
              >时间不会因为我们的懒惰而停止</
              li
              >
             
             
                
              </
              ul
              >
             
             
              </
              div
              >
             
             
              </
              body
              >
             
             
              </
              html
              >