知识库

资源库

模板库

字体库

酷站区

讨论区
快 搜        热门搜索:
当前位置:主页 > 知识库 > 客户端脚本 > JavaScript >  文章内容

用javascript 转换外部链接样式

2007-06-13 来源: 网络 作者: 未知 【收藏本文】【打印

    用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接。

    但用css有弊端:
    1、只支持FireFox等对web标准支持很好的浏览器。
    2、只能判断链接,不能判断锚点或javascript。如遇到<a href="javascript:void(0);">就无能为力了。

    这里可以结合js来完成,首先写一个样式:

    a.other:link,a.other:visited,a.other:active
      {
         background:url("external.gif") no-repeat top right;
         padding-right:15px;
      }

    再写一个js,但js要考虑到链接的多样性,如上面提到的javascript、锚点等。 如果是图片链接,就不要应用样式了。

    <script type="text/javascript">
         window.onload = function()
         {
           var aList = document.getElementsByTagName('a');
           var iCount = aList.length;
           for(var i = 0;i<iCount;i++)
           {
          
             if(!chkMyLink(aList[i].href,aList[i].innerHTML))
             {
               aList[i].className ='other';
             }
           }
         }
       
        //s是链接的url,innerhtml是链接文本
         function chkMyLink(s,innerhtml)
         {
            if(innerhtml.replace( /^\s*/,"").match(/^\<img/gi)) return true;
           var reg = /^http\:\/\//gi;
           if(s.match(reg))
           {
              reg = /^http\:\/\/www.lemongtree.com/gi;
              if(s.match(reg))
              {
                return true;
              }
              else
              {
                return false;
              }
           }
          return true;
         }
    </script>

    现在可以看到效果了。

    最新五条评论 点击查看全部评论评
    发表您的评论
    用户名:新注册) 密码: 匿名评论
    评论内容(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
    1:用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
    2:本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
    3:请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为