奇或偶數行高亮顯示及鼠標莫過高亮顯示,一個經常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒有一個封裝成類直接用的.想象自己當初谷歌這個類時,還真沒少折騰時間.
花了點時間,封裝成了一個類(附帶一個添加樣式的類),適合初學者,直接調用函數即可,無需改代碼.
核心JavaScript代碼:
//@Mr.Think---添加樣式的類
function addClass(elem,value){
if(!elem.className){
elem.className=value;
}else{
var newClass=elem.className;
newClass+=" ";
newClass+=value;
elem.className=newClass;
}
}
//@Mr.Think---奇或偶數行高亮顯示及鼠標劃過高亮顯示
function highLight(elemid,tagName,tagNameHighClass,crossTagNameClass){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(elemid)) return false;
var elemid=document.getElementById(elemid);
tagNames=elemid.getElementsByTagName(tagName);
//奇數行高亮顯示
var odd=true;//它的值決定是奇數高亮顯示還是偶數高亮顯示
for(var i=0; i<tagNames.length; i++){
if(odd==true){
addClass(tagNames[i],tagNameHighClass)
odd=false;
}else{
odd=true;
}
}
//鼠標劃過高亮顯示
for(var m=0; m<tagNames.length; m++){
tagNames[m].oldClassName=tagNames[m].className;
tagNames[m].onmouseover=function(){
addClass(this,crossTagNameClass);
}
tagNames[m].onmouseout=function(){
this.className=this.oldClassName;
}
}
}
參數說明: 使用說明:
2.tagName:事件tagName值,比如li,tr,p等等;
3.tagNameHighClass:奇或偶數行高亮顯示的樣式;
4.crossTagNameClass:鼠標劃過時高亮顯示的樣式.
2.調用(加載函數建議用本文中的加載函數,用window.onload非明智之舉):
highLight("yourId","yourTagName","yourHighClass","yourCrossClass");
}