最新简单介绍下去掉虚线框的几种方式

以下是三零网为大家整理的最新简单介绍下去掉虚线框的几种方式的文章，希望大家能够喜欢!

1.CSS样式表的outline属性（IE9、FF等浏览器推荐） 
　　对于最新的IE9浏览器以及FireFox里可以使用outline:none，去掉虚线框，当然FF下还可以写成-moz-outline:none。

a:focus {

outline:none;

-moz-outline:none;

}

　　2.IE的hidefocus=true属性（IE8及以下版本推荐）

　　对于版本低于IE9的IE浏览器，我们可以使用hidefocus方法，就比如：

<a href="index.php" hidefocus="true"></a>

　　3.onfocus事件的this.blur();

　　这个方法效果比较好，但是感觉语义化不好，原理是在获得焦点时去掉焦点。

<a href="index.php" οnfοcus="this.blur();"></a>

　　好吧，介绍了这三种办法，下面我们可以分情况整合一下，比如如果是IE9或者FF等浏览器就采用CSS的outline方法。如果是其它情况就尝试使用hidefocus或者this.blur()方法。对于JavaScript的方法可以采用遍历的方式。

var anchors = document.getElementsByTagName_r('a');

for (var i=0; i < anchors.length; i++) {

anchors[i].hideFocus = true;

}

// 或者采用this.blur()的方式，比如像下面这样写

var anchors = document.getElementsByTagName_r('a');

for (var i=0; i < anchors.length; i++) {

anchors[i].onfocus = function() {

this.blur();

}

}

　　上面的办法有个缺点，就是遍历了所有的A链接标签，可能有些链接我们依然希望它能够有虚线框，如何只让指定的链接去除虚线框呢？对于IE9及 FF、Chrome、Safari等浏览器，我们依然可以通过outline:none的形式去除，当然我们可以定义一个指定的CSS样式比如.hidefocus，就像下面那样：

.hidefocus:focus {

outline:none;

-moz-outline:none;

}

　　然后我们就通过

<a class="hidefocus" href="index.php">链接文本</a>

这种形式指定去掉该链接的虚线框。对于IE9以下版本的IE浏览器该怎么办呢？其实我们可以通过遍历class为hidefocus的链接然后再hideFocus或者this.blur()去除。

　　遍历class的办法有getElementsByClassName，不过可惜的是IE9以下不支持这个方法，当然有人写过全兼容版本的 getElementsByClassName，大家可以看看我这里找到的一个getElementsByClassName 新窗口打开: code.google.c…sbyclassname版本。

　　然后在引入getElementsByClassName方法后HTML代码可以这样插入一段脚本了。

<!--[if lt IE 9]>

<script type="text/javascript">

addDOMLoadEvent(

function() {

var anchors = getElementsByClassName('hidefocus');

for (var i=0; i<anchors.length; i++) {

anchors[i].hideFocus = true;

}

}

);

</script>

<![endif]-->

转载来自：http://www.q3060.com/list3/list122/86.html