用javascript 转换外部链接样式


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

  但用css有弊端:

  1、只支持FireFox等对web标准支持很好的浏览器。

  2、只能判断链接,不能判断锚点或javascript。如遇到就无能为力了。

  这里可以结合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>

  现在可以看到效果了

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3