隐藏 a 和 BUTTON 的焦点虚线框
发布时间：2018-09-03 19:09:28 所属栏目：创业 来源：站长网
导读：默认情况下, 在按下 A/ 和 BUTTON/ IE 和 FF 都会出现虚线框 可有很多时候, 这影响了我们页面的统一风格, 所以, 我们要把这虚线框去掉... 也许, 有很多人都在用 this.blur(), 来让对象失去焦点: a href=# onclick=this.blur(); return false; / //注:href有
|
默认情况下, 在按下 <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 即可 } } （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
