奇或偶数行高亮显示及鼠标划过高亮显示类（js）

奇或偶数行高亮显示及鼠标莫过高亮显示,一个经常用到的效果,也能谷歌到大把的这种效果JS,但好像还没有一个封装成类直接用的.想象自己当初谷歌这个类时,还真没少折腾时间.
花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码.
核心JavaScript代码:点此查看DEMO

 

//@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; } } }

参数说明:

1. elemid:事件ID,就是你想实现这种效果所在ID;
2. tagName:事件tagName值,比如li,tr,p等等;
3. tagNameHighClass:奇或偶数行高亮显示的样式;
4. crossTagNameClass:鼠标划过时高亮显示的样式.

使用说明:

1.如果你只想要其中一个效果,在类中,删除对应的不需要的代码,有注释;
2.调用(加载函数建议用本文中的加载函数,用window.onload非明智之举):

window.onload = function highYourElem(){ highLight("yourId", "yourTagName", "yourHighClass", "yourCrossClass"); }