使用JS CSS去除IE链接虚线框的三种方法

方法一：利用javascript的onfocus事件，实现如下：
Html代码


代码如下:

<a href="http://www.jb51.net/" onfocus="this.blur();">设计蜂巢</a>

如果引入了jQuery框架则可以利用它的事件绑定机制：
Js代码


代码如下:

$('a').bind('focus', function(){  
    if(this.blur){ //如果支持 this.blur  
        this.blur();  
    }  
});

方法二：利用css样式，实现如下：
Css代码 


代码如下:

a{ 
    blr: expression(this.onFocus=this.close()); 
} /* 只支持IE，过多使用效率低 */ 
a{ 
    blr: expression(this.onFocus=this.blur()); 
} /* 只支持IE，过多使用效率低 */ 
a:focus {  
    -moz-outline-style: none;  
} /* IE不支持 */ 
:focus {  
    outline: none;  
} /* for Firefox */

方法三：利用标签属性，仅支持IE，实现如下：Html代码


代码如下:

<a href="http://www.jb51.net/" hidefocus="true">设计蜂巢</a>

方法四：HTC 实现如下：
将一下代码保存为.htc后缀的文件
Js代码


代码如下:

<public:attach event="onfocus" onevent="quit()" />  
<script language="javascript">  
    function quit(){  
        this.blur();  
    }  
</script>

CSS代码


代码如下:

a {behavior:url("htc文件")}

赞 (0)

相关推荐

  • 使用JS CSS去除IE链接虚线框的三种方法

    方法一:利用javascript的onfocus事件,实现如下:Html代码 复制代码 代码如下: <a href="http://www.jb51.net/" onfocus="this.blur();">设计蜂巢</a> 如果引入了jQuery框架则可以利用它的事件绑定机制:Js代码 复制代码 代码如下: $('a').bind('focus', function(){       if(this.blur){ //如果支持 this.b

  • PHP去除字符串最后一个字符的三种方法实例

    PHP去除字符串最后一个字符的三种方法实例

    前言 本文讲讲PHP中如何正确的去除字符串中的最后一个字符,之前跟大家分享过一篇关于PHP去除字符串最后一个字符的三种方法的文章,但是没给出实例,下面话不多说,直接上代码,相信一眼就能看出来了,直接将下面代码复制粘贴到自己本地服务器下,运行即可. 实例代码 $a = 'http://www.mafutian.net/'; $b = 'http://www.mafutian.net'; // 错误的方式: $len = strlen($a) - 1; $a{$len} = ''; // $a[$l

  • 原生js获取left值和top值的三种方法

    在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值.比如做一个碰撞广告,就要不停的获取元素的top和left属性值. 需要注意的事:取值的元素必须要设置position:absolute绝对定位属性,才能取的到left值. 第一种方法,比较简单,就是直接通过obj.style.left和obj.style.top,但是有局限性,这种获取的方法只能获取到行内样式的left和top的属性值,不能获取到style标签和link 外部引用的left和top属性值. 第二种方法 只读

  • js二维数组定义和初始化的三种方法总结

    方法一:直接定义并且初始化,这种遇到数量少的情况可以用 var _TheArray = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]] 方法二:未知长度的二维数组 var tArray = new Array(); //先声明一维 for(var k=0;k<i;k++){ //一维长度为i,i为变量,可以根据实际情况改变 tArray[k]

  • js批量设置样式的三种方法不推荐使用with

    一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式: 总结三种方法如下 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> #div1{

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • js实现图片和链接文字同步切换特效的方法

    本文实例讲述了js实现图片和链接文字同步切换特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js图片和链接文字同步切换特效</title> <head> <script language=JavaScript> var imgUrl=new Array(); var imgLink=new Array(); var imgTz=new Array(); var adNum=0; imgUrl

  • JS实现点击链接切换显示隐藏内容的方法

    JS实现点击链接切换显示隐藏内容的方法

    本文实例讲述了JS实现点击链接切换显示隐藏内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer

  • JS+CSS实现可以凹陷显示选中单元格的方法

    本文实例讲述了JS+CSS实现可以凹陷显示选中单元格的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现可以凹陷显示选中的单元格</title> <style> td{cursor:hand;font-size:12px} .click{border-top:1px solid #0033CC;border-bottom:1px solid #DDEEFF;border

  • JS+CSS实现感应鼠标渐变显示DIV层的方法

    本文实例讲述了JS+CSS实现感应鼠标渐变显示DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

随机推荐