我们都知道链接分为外链、内链,维基百科对这个处理的很好,外链会显示一个小图标,告诉浏览者这个链接会跳出本站,这篇文章介绍使用 JavaScript 给外链添加特殊的样式。
单纯的用 CSS 有弊端:
这里可以结合 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 要考虑到:
- 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;
- }