JS批量添加onmouseover和onmouseout行为
当一个页面或一个层范围内有大量要重复使用onmouseover和 onmouseout行为的相同标签时，如果每个标签都去添加无疑使得页面变得非常冗长，今天做一个表格时就碰到这种情况，20行7列的表，大部分都有 onmouseover和onmouseout行为，这加起来密密麻麻的，眼花后直接头晕。于是，好方法来了，下面是源码，只取了其中6行：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS批量修改DHTML行为</title>
<style type="text/css">
#vipinfo{width:847px;margin:0;padding:0;text-align:center;font-family:宋 体;font-size:12px;color:#116b7b;border-top:1px solid #9dc5d6;border-left:1px solid #9dc5d6;}
#vipinfo ul{width:847px;margin:0;padding:0;}
#vipinfo ul li{margin:0;width:100px;padding-top:3px;line-height:24px;float:left;color:#116b7b;border-bottom:1px solid #9dc5d6;border-right:1px solid #9dc5d6;}
#vipinfo ul li.over{background:#116b7b;color:#fff;}
#vipinfo ul li.out{background:#fff;color:#116b7b;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function change(){
var vipinfo = document.getElementsByTagName("li");
for(var i=0;i<vipinfo.length;i++){
vipinfo[i].onmouseover=inputOver;
vipinfo[i].onmouseout=inputOut;
}
}
function inputOver(event)
{
var event=event || window.event;
var source = event.srcElement || event.target;
source.className="over";
}
function inputOut(event)
{
var event=event || window.event;
var source = event.srcElement || event.target;
source.className="out";
}
</script>
<div id="vipinfo">
<ul>
<!-- ------------------------------表格分行线------------------------------ -->
<li style="width:240px;background:#8B0000;color:#fff;"><b>会员等级 / 权限说明</b></li>
<li style="background:#116b7b;color:#fff;">访问游客</li>
<li style="background:#116b7b;color:#fff;">临时会员</li>
<li style="background:#116b7b;color:#fff;">普通会员</li>
<li style="background:#116b7b;color:#fff;">青铜会员</li>
<li style="background:#116b7b;color:#fff;">白银会员</li>
<li style="background:#116b7b;color:#fff;">黄金会员</li>
<!-- ------------------------------表格分行线------------------------------ -->
<li style="width:240px;#116b7b;background:#116b7b;color:#fff;">会员条件</li>
<li>未注册访问者</li><li>免费注册</li><li>免费升级< /li><li>免费升级</li><li>交费升级</li><li>只对金融机 构</li>
<!-- ------------------------------表格分行线------------------------------ -->
<li style="width:240px;#116b7b;background:#116b7b;color:#fff;">发布贷款供应(协办)信息</li>
<li>√</li><li>√</li><li>√</li><li>√</li><li>√</li><li>√</li>
<!-- ------------------------------表格分行线------------------------------ -->
<li style="width:240px;#116b7b;background:#116b7b;color:#fff;">发布贷款需求信息</li>
<li>-</li><li>√</li><li>√</li><li>√</li><li>√</li><li>√</li>
<!-- ------------------------------表格分行线------------------------------ -->
<li style="width:240px;#116b7b;background:#116b7b;color:#fff;">发布其他信息(相关服务、招聘求职)</li>
<li>-</li><li>-</li><li>√</li><li>√</li><li>√</li><li>√</li>
<!-- ------------------------------表格分行线------------------------------ -->
<li style="width:240px;#116b7b;background:#116b7b;color:#fff;">管理自己发布的所有信息</li>
<li>-</li><li>-</li><li>-</li><li>√</li><li>√</li><li>√</li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号