奇或偶數行高亮顯示及鼠標莫過高亮顯示,一個經常用到的效果,也能谷歌到大把的這種效果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;
?? ? ? ?}
?? ?}
}

原文發布于Mr.Think的個人博客: http://mrthink.net/javascript-tagnames-highlight/

轉載于:https://www.cnblogs.com/mrthink/archive/2010/07/05/1771161.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的奇或偶数行高亮显示及鼠标划过高亮显示类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。