用javascript 转换外部链接样式

2016-02-19 19:38 9 1 收藏

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

【 tulaoshi.com - Web开发 】

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

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

  但用css有弊端:

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

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

  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;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

      现在可以看到效果了。

来源:http://www.tulaoshi.com/n/20160219/1621462.html

延伸阅读
标签: Web开发
用 JavaScript 给站外链接的 cursor 进行改造 - Beautiful Style « 样式之美 » loaoao.com #outSiteIcon{ position:absolute; z-index:99; display:none; } 用JavaScript给站外链接的cursor进行改造 因为是自己用的,没把图片路径写成变量存起来,链接测试:实验室首页,google。 Copyright ©...
标签: Web开发
小狗收藏贴 转换 仅拼音 排序 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: excel
掌握要领,实现Excel动态链接外部数据库 我们有时需要在Excel中调取其他数据库的数据,并且希望其他数据库数据改变时,Excel中调取的数据也随之动态改变。下面介绍在Excel中通过新建数据库查询(Microsoft Query)的方法来实现动态链接数据库。 您在Excel中第一次使用新建数据库查询查询数据时,如果系统未安装Microsoft Query,系统...
标签: Web开发
外部引用的优点 为什么要把CSS声明做成一个CSS文件呢?这样做的好处有三个。 第一个好处,网页处理速度会更快一些,尤其在有很多网页共用一份CSS样式表时更为好用!因为你不用为每一页都写同样的CSS代码,网页自然就会更瘦一些轻快一些。 第二个好处是,可以防止一些电脑程度较低的使用者直接看到CSS语法(就是有人不喜欢被看见语法),当然...
标签: 电脑入门
我们有时需要在Excel中调取其他数据库的数据,并且希望其他数据库数据改变时,Excel中调取的数据也随之动态改变。下面介绍在Excel中通过新建数据库查询(Microsoft Query)的方法来实现动态链接数据库。 您在Excel中第一次使用新建数据库查询查询数据时,如果系统未安装Microsoft Query,系统会提示您安装。 一、Excel链接vfp数据库 vfp是常...

经验教程

289

收藏

89
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部