隐藏 <a> 和 BUTTON 的焦点虚线框

概述默认情况下, 在按下 <A/> 和 <BUTTON/> IE 和 FF 都会出现虚线框 可有很多时候, 这影响了我们页面的统一风格, 所以, 我们要把这虚线框去掉... 也许, 有很多人都在用 this.blur(), 来让对象失去焦点: <a href="#" onclick="this.blur(); return false;" /> /… 默认情况下,在按下 <A/> 和 <button/> IE 和 FF 都会出现虚线框
可有很多时候,这影响了我们页面的统一风格,所以,我们要把这虚线框去掉...

也许,有很多人都在用 this.blur(),来让对象失去焦点:

<a href="#" onclick="this.blur(); return false;" /> //注:href有值,onclick不要return false,否则链接可能会无效


很明显,这是治标不治本的方法,其实IE和FF下都有控制焦点线框样式的方法

IE下: 在元素标签中添加 hIDefocus 属性
FF下: <a/> 标签可以通过 CSS2.0 规范样式属性 outline 来设定线框样式
<button/> 没有outline样式,但是可以通过 ::-moz-focus-inner (FF私有伪类,注意是两个冒号) 来设定线框样式

如,要在IE和FF下隐藏线框,可如此

代码
<style type="text/CSS" >
a.hIDefocus { outline: none; } //无轮廓
button.hIDefocus::-moz-focus-inner { border:none; } //::-moz-focus-inner无边框
</style>

<a herf="#" class="hIDefocus" hIDefocus >点击我无虚线</a> //hIDefocus IE下的元素属性
<button class="hIDefocus" hIDefocus >点击我无虚线哦</button>

如果页面中的<a/>非常多,一个一个地加上 hIDefocus[=true]也许会很麻烦,
所以,页面加载完成后,可以用Js来添加这一属性(使用jquery的页面,更是容易按需取到要设置隐藏的元素对象)

代码
window.onload = function(){
// something to do on window loaded
hIDeFocusWithbuttons();
}
function hIDeFocusWithbuttons(){
var buttons = document.getElementsByTagname('button');
for(var i=0,l=buttons.length; i<l; i++){
buttons[i].setAttribute('hIDefocus',true); //取消隐藏虚线,把 hIDefocus 设为 false 即可
}
}
总结

以上是内存溢出为你收集整理的隐藏 <a> 和 BUTTON 的焦点虚线框全部内容，希望文章能够帮你解决隐藏 <a> 和 BUTTON 的焦点虚线框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。