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

发布于 2017-11-25 22:32:32 字数 1568 浏览 2051 评论 0

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

使用 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;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。