2025年4月12日 星期六 乙巳(蛇)年 正月十三 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

使用 JavaScript 给外链添加特殊的样式

时间:12-14来源:作者:点击数:18

我们都知道链接分为外链、内链,维基百科对这个处理的很好,外链会显示一个小图标,告诉浏览者这个链接会跳出本站,这篇文章介绍使用 JavaScript 给外链添加特殊的样式。

单纯的用 CSS 有弊端:

  1. 只支持 FireFox 等对 Web 标准支持很好的浏览器。
  2. 只能判断链接,不能判断锚点或 JavaScript 事件。如遇到 <a href="javascript:void(0);"></a> 就无能为力了。

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

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

再写一个 JavaScript,但 JavaScript 要考虑到:

  1. 链接的多样性,如上面提到的 JavaScript 、锚点等。
  2. 如果是图片链接,就不要应用样式了。
  • 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 是链接的 urlinnerhtml 是链接文本

  • function chkMyLink(s,innerhtml){
  • if(innerhtml.replace(/^\s*/,"").match(/^\<img/gi))
  • return true;
  • var reg = /^http\:\/\//gi;
  • if(s.match(reg)){
  • reg = /^http\:\/\/www.wenjiangs.com/gi;
  • if(s.match(reg)){
  • return true;
  • }else{
  • return false;
  • }
  • }
  • return true;
  • }
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐