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

奇或偶数行高亮显示及鼠标莫过高亮显示,一个经常用到的效果,也能谷歌到大把的这种效果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/
posted @   Mr.Think  阅读(370)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
点击右上角即可分享
微信分享提示