hao_2468

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

做前台开发时肯定会遇到使用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$]$.onfocus=function(){this.blur();};
  5.    }

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

posted on 2010-07-16 10:06  hao_2468  阅读(399)  评论(0编辑  收藏  举报