奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過(guò)高亮顯示,一個(gè)經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒(méi)有一個(gè)封裝成類直接用的.想象自己當(dāng)初谷歌這個(gè)類時(shí),還真沒(méi)少折騰時(shí)間.
花了點(diǎn)時(shí)間,封裝成了一個(gè)類(附帶一個(gè)添加樣式的類),適合初學(xué)者,直接調(diào)用函數(shù)即可,無(wú)需改代碼.
核心JavaScript代碼:點(diǎn)此查看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---奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示
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);
?? ?//奇數(shù)行高亮顯示
?? ?var odd=true;//它的值決定是奇數(shù)高亮顯示還是偶數(shù)高亮顯示
?? ?for(var i=0; i<tagNames.length; i++){
?? ? ? ?if(odd==true){
?? ? ? ? ? ?addClass(tagNames[i],tagNameHighClass)
?? ? ? ? ? ?odd=false;
?? ? ? ? ? ? }else{
?? ? ? ? ? ?odd=true;
?? ? ? ? ? ?}
?? ? ? ?}
?? ?//鼠標(biāo)劃過(guò)高亮顯示
?? ?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;
?? ? ? ?}
?? ?}
}

原文發(fā)布于Mr.Think的個(gè)人博客: http://mrthink.net/javascript-tagnames-highlight/

轉(zhuǎn)載于:https://www.cnblogs.com/mrthink/archive/2010/07/05/1771161.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。