做前台开发时肯定会遇到使用button,a标签的时候,每次点击相关这些标签的时候,我们会经常看到有一个虚线框出现,从视觉效果来看,有虚线框会很刺眼,形象到用户浏览的视觉中心,所以我们有必要将这个刺眼的虚线框去掉。利用google和百度,整理一下相关的方法,方便以后开发当中使用。
方法一:使用css方法
- a {blr:expression(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$]$.onfocus=function(){this.blur();};
- }
当前是添加一个hidefocus的属性,注释掉的句子是添加onfocus=this.blur();
然后调用fHideFocus(”A”),即可把a的虚线框去掉
通过传递不同的参数,可以去掉更多的虚线框,比如”BUTTON”可以去掉button的
但要记住参数要用大写字母