zoukankan      html  css  js  c++  java
  • 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{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{847px;margin:0;padding:0;}
    #vipinfo ul li{margin:0;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="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="240px;#116b7b;background:#116b7b;color:#fff;">会员条件</li>
               <li>未注册访问者</li><li>免费注册</li><li>免费升级< /li><li>免费升级</li><li>交费升级</li><li>只对金融机 构</li>
             <!-- ------------------------------表格分行线------------------------------ -->
               <li style="240px;#116b7b;background:#116b7b;color:#fff;">发布贷款供应(协办)信息</li>
               <li>√</li><li>√</li><li>√</li><li>√</li><li>√</li><li>√</li>
             <!-- ------------------------------表格分行线------------------------------ -->
               <li style="240px;#116b7b;background:#116b7b;color:#fff;">发布贷款需求信息</li>
               <li>-</li><li>√</li><li>√</li><li>√</li><li>√</li><li>√</li>
             <!-- ------------------------------表格分行线------------------------------ -->
               <li style="240px;#116b7b;background:#116b7b;color:#fff;">发布其他信息(相关服务、招聘求职)</li>
               <li>-</li><li>-</li><li>√</li><li>√</li><li>√</li><li>√</li>
             <!-- ------------------------------表格分行线------------------------------ -->
               <li style="240px;#116b7b;background:#116b7b;color:#fff;">管理自己发布的所有信息</li>
               <li>-</li><li>-</li><li>-</li><li>√</li><li>√</li><li>√</li>
        </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    编程这几天出现的很2的问题!!!
    2020 8 1 每日总结
    2020 8 6 每日总结
    2020 8 7 读后感
    2020 8 4 每日总结
    2020 7 30 每日总结
    2020 8 3 每日总结
    2020 8 8 每日总结
    2020 8 2 每周总结
    2020 8 5 每日总结
  • 原文地址:https://www.cnblogs.com/nianshi/p/1575783.html
Copyright © 2011-2022 走看看