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

  • Z时代
  • 2024-01-10
  • 分类：IT

我们都知道链接分为外链、内链，维基百科对这个处理的很好，外链会显示一个小图标，告诉浏览者这个链接会跳出本站，这篇文章介绍使用 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 是链接的 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.wenjiangs.com/gi;
		if(s.match(reg)){
			return true;
		}else{
			return false;
		}
	}
	return true;
}

以上是 使用 JavaScript 给外链添加特殊的样式 的全部内容， 来源链接： utcz.com/p/231764.html

回到顶部