CSS+JS方法去除点击链接,按钮时出现的虚线框

做前台开发时肯定会遇到使用button,a标签的时候，每次点击相关这些标签的时候，我们会经常看到有一个虚线框出现，从视觉效果来看，有虚线框会很刺眼，形象到用户浏览的视觉中心，所以我们有必要将这个刺眼的虚线框去掉。利用google和百度，整理一下相关的方法，方便以后开发当中使用。方法一：使用css方法

a {blr:e­xpression(this.onFocus=this.blur())} /*for IE*/ a {outline:}/*for FireFox*/

IE浏览器下面还可以使用IE下的私有的html属性：hideFoucs，在标签的结构中加入hidefocus=”true”属性。即：

<a href="http://www.g.cn" hidefocus="true" title="谷歌">谷歌</a>

方法二：使用javascript方法：通过javascript遍历页面Dom

window.onload=function()    { for(var i=0; ii<document.links.length; ii++) document.links$[$ii$]$.onfocus=function(){this.blur()}    }

Javascript封装为函数

function fHideFocus(tName){    aTag=document.getElementsByTagName(tName);    for(i=0;i<aTag.length;i++)aTag$[$i$]$.hideFocus=true;    //for(i=0;i<aTag.length;i++)aTag$[$i$]$.οnfοcus=function(){this.blur();};    }

当前是添加一个hidefocus的属性，注释掉的句子是添加οnfοcus=this.blur(); 　　然后调用fHideFocus(”A”)，即可把a的虚线框去掉 　　通过传递不同的参数，可以去掉更多的虚线框，比如”BUTTON”可以去掉button的 　　但要记住参数要用大写字母

转载于:https://www.cnblogs.com/n666/archive/2010/07/16/2190907.html

相关资源：数据结构—成绩单生成器