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

时间:2021-05-18

花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码.
核心JavaScript代码:
奇或偶数行高亮显示及鼠标划过高亮显示类~@Mr.Think body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em} h1{font-size:1em; font-weight:normal;} h1 a{background:#CFF; padding:2px 3px; text-decoration:none;} h1 a:hover{background:#eee; text-decoration:underline} table#itab{border:1px solid #999; width:80%; margin:0 auto; border-collapse:collapse} table#itab td{border:1px solid #ccc; text-align:center;} table#itab caption{font-size:1em; font-weight:normal; color:#a40000; margin-top:20px;} .gray{background:#eee;cursor:pointer} .red{background:#a40000; color:#fff; cursor:pointer} .highol{background:#ccf;cursor:pointer} ol#olid{width:80%; margin:1em auto; padding:0} ol#olid li{list-style:inside decimal;text-indent:5px;line-height:2.2em;} ol#olid em{color:#a40000;}

Mr.Think的个人博客@专注前端技术,热爱PHP,崇尚简单生活.

我是高亮奇数行及鼠标划过高亮显示效果,Uh Oh! 1ACDY 2BSAE 3HIFJ 4AGAN 5ZAGM 6CDLH 7DWGS 8TQOM
  • 可以通过改变var odd=true;的值来确定是高亮显示奇数行还是偶数行;
  • DOM编程,兼容主流浏览器,可扩展性强;
  • 适应于表格,列表,div等;
  • elemid:事件ID,就是你想实现这种效果所在ID;
  • tagName:事件tagName值,比如li,tr,p等等;
  • tagNameHighClass:奇或偶数行高亮显示的样式;
  • crossTagNameClass:鼠标划过时高亮显示的样式.
  • [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

    参数说明:

    1.elemid:事件ID,就是你想实现这种效果所在ID;
    2.tagName:事件tagName值,比如li,tr,p等等;
    3.tagNameHighClass:奇或偶数行高亮显示的样式;
    4.crossTagNameClass:鼠标划过时高亮显示的样式.

    使用说明:

    1.如果你只想要其中一个效果,在类中,删除对应的不需要的代码,有注释;
    2.调用(加载函数建议用本文中的加载函数,用window.onload非明智之举):
    复制代码 代码如下:
    window.onload=function highYourElem(){
    highLight("yourId","yourTagName","yourHighClass","yourCrossClass");
    }

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章