奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過(guò)高亮顯示,一個(gè)經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒(méi)有一個(gè)封裝成類(lèi)直接用的.想象自己當(dāng)初谷歌這個(gè)類(lèi)時(shí),還真沒(méi)少折騰時(shí)間.
　　花了點(diǎn)時(shí)間,封裝成了一個(gè)類(lèi)(附帶一個(gè)添加樣式的類(lèi)),適合初學(xué)者,直接調(diào)用函數(shù)即可,無(wú)需改代碼.
核心JavaScript代碼: 點(diǎn)此查看DEMO

 1 //@Mr.Think---添加樣式的類(lèi)
 2 function addClass(elem,value){
 3     if(!elem.className){
 4         elem.className=value;
 5     }else{
 6         var newClass=elem.className;
 7         newClass+=" ";
 8         newClass+=value;
 9         elem.className=newClass;
10     }
11 }
12 //@Mr.Think---奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示
13 function highLight(elemid,tagName,tagNameHighClass,crossTagNameClass){
14     if(!document.getElementsByTagName) return false;
15     if(!document.getElementById) return false;
16     if(!document.getElementById(elemid)) return false;
17     var elemid=document.getElementById(elemid);
18     tagNames=elemid.getElementsByTagName(tagName);
19     //奇數(shù)行高亮顯示
20     var odd=true;//它的值決定是奇數(shù)高亮顯示還是偶數(shù)高亮顯示
21     for(var i=0; i<tagNames.length; i++){
22         if(odd==true){
23             addClass(tagNames[i],tagNameHighClass)
24             odd=false;
25              }else{
26             odd=true;
27             }
28         }
29     //鼠標(biāo)劃過(guò)高亮顯示
30     for(var m=0; m<tagNames.length; m++){
31         tagNames[m].oldClassName=tagNames[m].className;
32         tagNames[m].onmouseover=function(){
33             addClass(this,crossTagNameClass);
34             }
35             tagNames[m].onmouseout=function(){
36             this.className=this.oldClassName;
37         }
38     }
39 }        

        

        
        
      
        
it知識(shí)庫(kù)：奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類(lèi)，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。