|
奇或偶數(shù)行高亮顯示及鼠標莫過高亮顯示,一個經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒有一個封裝成類直接用的.想象自己當初谷歌這個類時,還真沒少折騰時間.
花了點時間,封裝成了一個類(附帶一個添加樣式的類),適合初學者,直接調(diào)用函數(shù)即可,無需改代碼.
核心JavaScript代碼: 點此查看DEMO
1 //@Mr.Think---添加樣式的類
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ù)行高亮顯示及鼠標劃過高亮顯示
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 //鼠標劃過高亮顯示
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ù)行高亮顯示及鼠標劃過高亮顯示類,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。