用javascript 转换外部链接样式

姚发前

姚发前

2016-02-19 19:38

今天图老师小编要向大家分享个用javascript 转换外部链接样式教程,过程简单易学,相信聪明的你一定能轻松get!

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

  但用css有弊端:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

以下是引用片段:
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;iiCount;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

      现在可以看到效果了。

展开更多 50%)
分享

猜你喜欢

用javascript 转换外部链接样式

Web开发
用javascript 转换外部链接样式

用JavaScript使链接按钮不断变化

电脑网络
用JavaScript使链接按钮不断变化

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

不错的用外部Javascript修正特定网页内容

Web开发
不错的用外部Javascript修正特定网页内容

用css样式控制超链接颜色显示

Web开发
用css样式控制超链接颜色显示

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用javascript实现的汉字简繁转换

Web开发
用javascript实现的汉字简繁转换

HTML TO JavaScript 转换

Web开发
HTML TO JavaScript 转换

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Windows8系统账号自动登录默认设置

Windows8系统账号自动登录默认设置

Javascript对url进行编码的几个函数

Javascript对url进行编码的几个函数
下拉加载更多内容 ↓