奇或偶数行高亮显示及鼠标莫过高亮显示,一个经常用到的效果,也能谷歌到大把的这种效果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

奇或偶数行高亮显示及鼠标划过高亮显示类相关推荐

  1. 课后作业--Python语言打印菱形(奇、偶数行效果)

    上周留的Python作业觉着很值得写一篇帖子用来存放,它这就慢慢地走来咯~ 使用for循环.range函数和if else条件语句,打印奇数行.偶数行效果不一的菱形. 效果分析: 实现代码: #用户要 ...

  2. 关闭myeclipse中烦人的鼠标划过,自动提示功能--世界终于清静!

    eclipse越来越智能,身为码农的我却越来越伤心.虽然你很智能,但请你提供一些有用的信息给我,不要乱七八槽的,不问青红皂白就塞一大堆提示给我,对不起,哥不需要这些!!! 都知道,使用myeclips ...

  3. html代码怎么image标签里加鼠标形状变成手掌样式,给html标签加上鼠标划过小手样式...

    给html标签加上鼠标划过小手样式 方法:给当前标签增加样式 style="cursor:pointer;" eg:增加返回箭头样式,给箭头增加小手 - 在style中添加curs ...

  4. 鼠标划过表格行变色效果JS

    <!--鼠标滑过表格行变色效果开始--> <script type="text/javascript">         /* 当鼠标移到表格上是,当前一行 ...

  5. HTML表格鼠标滑过变色 和奇数偶数行变色+点击变色

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 实战演练 | 数据库中检索奇数或偶数行的简单方法

    从表中仅选择奇数行或偶数行听起来像是你永远不必做的事情,除非你自行这样做.在谷歌快速搜索一下,可以证实这事情是经常有人会做的,但是,很少有数据库从业者知道如何做,他们总是在线数据库社区求助寻找答案.作 ...

  7. 《Unity开发实战》——3.9节鼠标悬停时高亮显示材质

    本节书摘来自华章社区<Unity开发实战>一书中的第3章,第3.9节鼠标悬停时高亮显示材质,作者 (爱尔兰)Matt Smith (巴西)Chico Queiroz,更多章节内容可以访问云 ...

  8. shell 删除奇数偶数行

    今天总结一个正则的东西匹配和替换的删除奇数行和偶数行来理解模式空间以及模式空间是如何保存.标记数据的 删除偶数行: %s/\(^.*$\)\n^.*$/\1/g 删除奇数行: %s/^.*$\n\(^ ...

  9. 在php里让字体划过变色,鼠标划过字体时如何用css来实现字体变色?(代码实测)...

    当我们在浏览网页时,鼠标划过某段文字会出现变色效果,这就是css字体变色,一方面是为了主动吸引人用户目光去点击,另一方面是为了防止用户点击错其他文字段落.其实这种css鼠标经过字体变色的效果是非常容易 ...

最新文章

  1. cannot import name ‘izip‘ from ‘itertools‘
  2. 浏览器对象模型BOM
  3. makefile中模式规则的引入和介绍------%:%.cpp
  4. verilog实现伺服电机控制
  5. Junit5新功能一览
  6. 国产特斯拉遭疯狂吐槽:涨价、车尾带汉字标、续航打折扣
  7. 802.11的CSMA/CA机制
  8. 斗战神 拳猴刷图加点
  9. SecureCRT和SecureFX的下载和安装2022
  10. User does not have the ‘LOCK TABLES‘ privilege required to obtain a consistent snapshot by preventin
  11. IOl:从文件夹中找到后缀名为TXT的文件,然后复制到指定的文件夹
  12. WebAssembly 初探
  13. HDU-6578 Blank
  14. 自己更换云平台绑定QQ号的方法
  15. Nginx :user nobody
  16. Mycat生产实践---性能调优
  17. 微吼2022企业直播创见大会:探寻直播行业星辰大海
  18. 计算机专业研究生平均月薪,研究生刚毕业工资一般多少
  19. 查询练习:YEAR 与 NOW 函数
  20. rstp要点1:端口优先级为什么是16的倍数

热门文章

  1. java关联查询实战_MapReduce实战(五)实现关联查询
  2. 科普 | 你必须了解的漏洞利用缓解及对抗技术
  3. android技巧:apk文件反编译以及签名打包,APKTool 反编译,打包,签名
  4. matlab传递函数参数辨识,基于matlab/Simulink的参数辨识
  5. 启动非java虚拟机方式下运行matlab
  6. 如何保存QQ聊天记录
  7. CVPR 2020 《Context-Aware Group Captioning via Self-Attention and Contrastive Features》论文笔记(数据集)
  8. 201711月04日普及组 Array
  9. 电子老鼠闯迷宫pascal解题程序
  10. c语言测试1到3章,2013计算机等级考试二级《C语言》复习:第三章第1节