奇或偶数行高亮显示及鼠标莫过高亮显示,一个经常用到的效果,也能谷歌到大把的这种效果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;
}
}
}