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

236 阅读 0 评论 156 点赞

我是靠谱客的博主神勇唇彩，最近开发中收集的这篇文章主要介绍奇偶行高亮显示及鼠标划过高亮显示类，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码.
核心JavaScript代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>奇或偶数行高亮显示及鼠标划过高亮显示类~@Mr.Think</title> 
<style> 
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;} 
</style> 
</head> 
<body> 
 
<h1>Mr.Think的个人博客
@专注前端技术,热爱PHP,崇尚简单生活.</h1> 
<table id="itab"> 
<caption>我是高亮奇数行及鼠标划过高亮显示效果,Uh Oh!</caption> 
<tr><td>1</td><td>A</td><td>C</td><td>D</td><td>Y</td></tr> 
<tr><td>2</td><td>B</td><td>S</td><td>A</td><td>E</td></tr> 
<tr><td>3</td><td>H</td><td>I</td><td>F</td><td>J</td></tr> 
<tr><td>4</td><td>A</td><td>G</td><td>A</td><td>N</td></tr> 
<tr><td>5</td><td>Z</td><td>A</td><td>G</td><td>M</td></tr> 
<tr><td>6</td><td>C</td><td>D</td><td>L</td><td>H</td></tr> 
<tr><td>7</td><td>D</td><td>W</td><td>G</td><td>S</td></tr> 
<tr><td>8</td><td>T</td><td>Q</td><td>O</td><td>M</td></tr> 
</table> 
<ol id="olid"> 
<li>可以通过改变<em>var odd=true;</em>的值来确定是高亮显示奇数行还是偶数行;</li> 
<li>DOM编程,兼容主流浏览器,可扩展性强;</li> 
<li>适应于表格,列表,div等;</li> 
<li><em>elemid</em>:事件ID,就是你想实现这种效果所在ID;</li> 
<li><em>tagName</em>:事件tagName值,比如li,tr,p等等;</li> 
<li><em>tagNameHighClass</em>:奇或偶数行高亮显示的样式;</li> 
<li><em>crossTagNameClass<em>:鼠标划过时高亮显示的样式.</li> 
</ol> 
</body> 
</html>

[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"); 
} 

最后

以上就是神勇唇彩为你收集整理的奇偶行高亮显示及鼠标划过高亮显示类的全部内容，希望文章能够帮你解决奇偶行高亮显示及鼠标划过高亮显示类所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：JavaScript
浏览次数：236 次浏览
发布日期：2022-04-17 08:10:02
本文链接：https://www.kaopuke.com/article/k-p-k_14_u_7_o_6_f3_13__7__10_3.html

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

概述

最后

评论列表共有 0 条评论

发表评论取消回复

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

概述

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复