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

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

方法一：使用css方法

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

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

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

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

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

Javascript封装为函数

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

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

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