用javascript 转换外部链接样式
作者相关:http://www.lemongtree.com
用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接。
但用css有弊端:
1、只支持firefox等对web标准支持很好的浏览器。
2、只能判断链接,不能判断锚点或javascript。如遇到<a href="javascript:void(0);">就无能为力了。
这里可以结合js来完成,首先写一个样式:
a.other:link,a.other:visited,a.other:active
{
background:url("external.gif") no-repeat top right;
padding-right:15px;
} [来源 www.iocblog.net]
再写一个js,但js要考虑到链接的多样性,如上面提到的javascript、锚点等。 如果是图片链接,就不要应用样式了。
<script type="text/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';
}
}
}
[来源 www.iocblog.net]
//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>
现在可以看到效果了。
文章整理:iocblog
版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。