當(dāng)前位置:
首頁(yè) >
奇或偶数行高亮显示及鼠标划过高亮显示类
發(fā)布時(shí)間:2025/3/14
30
豆豆
生活随笔
收集整理的這篇文章主要介紹了
奇或偶数行高亮显示及鼠标划过高亮显示类
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
奇或偶數(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
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)題。
- 上一篇: 《幸福就在你身边》第七课、工作着,快乐着
- 下一篇: AS3初学者容易迷糊的几个问题